Pretty UI Design for Android-swipe background, transparent list

This article is from a foreign network to see the effect. It feels very good. It simplifies the code. Take it, look at it first:

The effect is very good, let's see how it's implemented:

Look at the text source, very easy, is an array:

<?xml version= "1.0" encoding= "Utf-8"?
><resources> <string-array name= "list_content" > <item>if I could save time in a Bottle < /item> <item>the first thing that I\ ' d like to do </item> <item>is to save every day UN Til eternity passes away </item> <item>just to spend them with you </item> <item>if I could save time in a bottle </item> <item>the first thing this i\ ' d like to do </item> & Lt;item>is to save every day until eternity passes away </item> <item>just to spend them with you &L T;/item> <item>if I could make days last forever </item> <item>if words could make wish Es come true </item> <item>i\ ' d save every day like a treasure and then </item> &LT;ITEM&G T;again I would spend them with you </item> <item>thank-comforting me when i\ ' m sad </item&        Gt <item>loving me when I\ ' m mad </item> <item>picking me up when I\ ' m down </item> <item>than        K being my friend and being around </item> <item>teaching me the meaning of love </item> <item>encouraging me when I need a shove </item> <item>but the most of all thank your for < /item> <item>loving me for who I am </item> </string-array></resources>

The layout is also very easy:

<framelayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:layout_width=" match_parent "    android:layout_height=" Match_parent " >    <com.example.scrolltest.topcenterimageview        android:id= "@+id/bg"        android:layout_width= " Match_parent "        android:layout_height=" match_parent "        android:src=" @drawable/image "/>    <listview        android:id= "@+id/list"        android:layout_width= "match_parent"        android:layout_height= "Match_parent"         android:divider= "@null"/></framelayout>

Because we are using a ListView to display. So that's the simplest thing to do.

OK, let's take a look at the program:

Package Com.example.scrolltest;import Android.app.activity;import Android.os.bundle;import Android.view.View; Import Android.widget.abslistview;import Android.widget.abslistview.layoutparams;import Android.widget.abslistview.onscrolllistener;import Android.widget.arrayadapter;import Android.widget.ListView; public class Mainactivity extends Activity {private Topcenterimageview bg;private ListView list;private View head; @Overri deprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview ( R.layout.activity_main); bg = (Topcenterimageview) Findviewbyid (r.id.bg); list = (ListView) Findviewbyid (r.id.list); List.setadapter (New arrayadapter<string> (This, r.layout.list_item,getresources (). Getstringarray ( r.array.list_content)); head = new View (this); Head.setlayoutparams (New Layoutparams (Layoutparams.match_parent, 700) ); List.addheaderview (head); List.setonscrolllistener (new Onscrolllistener () {@Overridepublic void Onscrollstatechanged (Abslistview view, INT Scrollstate) {} @Overridepublic void Onscroll (abslistview view, int firstvisibleitem,int visibleitemcount, int Totalitemcount) {int top = Head.gettop ()/2;bg.settop (top);}});}}

There is a topcenterimageview. I believe we will be more puzzled, let us see what he is:

Package Com.example.scrolltest;import Android.content.context;import Android.graphics.matrix;import Android.util.attributeset;import android.widget.imageview;/** * Custom view allowing an image to being displayed with a "top Crop "Scale type * * @author Nicolas Pomepuy * */public class Topcenterimageview extends ImageView {public Topcenterimag Eview (context context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle); Setscaletype ( Scaletype.matrix);} Public Topcenterimageview (context context, AttributeSet Attrs) {Super (context, attrs); Setscaletype (Scaletype.matrix) ;} Public Topcenterimageview (Context context) {super (context); Setscaletype (Scaletype.matrix);} /** * TOP Crop scale type */@Overrideprotected boolean setframe (int l, int t, int r, int b) {if (getdrawable () = = null) {R Eturn super.setframe (L, T, R, b);} Matrix matrix = Getimagematrix (), Float scalefactor = getwidth ()/(float) getdrawable (). Getintrinsicwidth (); Matrix.setscale (Scalefactor, scalefactor); Setimagematrix (Matrix); return Super.setframe (L, T, R, b);}} 

This rewritten imageview is for the size of the ImageView to be set. Let him conform to our background. The gaze is written very clearly: Custom view allowing an image to being displayed with a "top crop" scale type

At this time, we look at the code is very clear, the effect is very great ~

Above.

Pretty UI Design for Android-swipe background, transparent list