How can I create a 'Pulse' like UI for an android application
I would like to know how can I create a Pulse like app on android Here is a screenshot:
A number of things:
- It has a number of 'row's of 开发者_Python百科horizontal content.
- Each 'row' has 'cell's of content.
- I can 'fling' left and right to see the horizontal content.
- As it reaches the end of the horizontal content, it will automatically load more content.
Thank you.
Conceptually this is just a ScrollView
containing a bunch of Gallery
layouts using an infinite scrolling adapter like cwac-endless
. I think with a bit of work you can probably get them all to play nicely together.
I just throw some quick and dirty example:
Here is your xml layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
<TextView android:text="News One" android:id="@+id/textView1" android:layout_height="wrap_content" android:layout_width="wrap_content"></TextView>
<HorizontalScrollView android:id="@+id/horizontalScrollView1"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:id="@+id/linearLayout1"
android:orientation="horizontal" android:layout_height="wrap_content"
android:layout_width="wrap_content">
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView1"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView2"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView3"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView4"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView5"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView6"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:src="@drawable/image"
android:layout_width="wrap_content" android:id="@+id/imageView7"
android:layout_height="wrap_content"></ImageView>
</LinearLayout>
</HorizontalScrollView>
<TextView android:text="News Two" android:id="@+id/textView2" android:layout_height="wrap_content" android:layout_width="wrap_content"></TextView>
<HorizontalScrollView android:id="@+id/horizontalScrollView2"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<LinearLayout android:id="@+id/linearLayout2"
android:orientation="horizontal" android:layout_height="wrap_content"
android:layout_width="wrap_content">
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView21"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView22"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView23"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView24"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView25"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:layout_width="wrap_content" android:id="@+id/imageView26"
android:layout_height="wrap_content" android:src="@drawable/image"></ImageView>
<ImageView android:src="@drawable/image"
android:layout_width="wrap_content" android:id="@+id/imageView27"
android:layout_height="wrap_content"></ImageView>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
To make it perfect, you can add border to each image, etc,etc. But, you should get the idea from this layout.
Maybe you could use like a horizontal scrolling view with a custom layout for each element and then like load what you want in there? I dont really know just brainstorming. Sounds like it would work with that type of layout.
精彩评论