Pretty UI Design for Android-swipe background, transparent list

Source: Internet
Author: User

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= ""    xmlns:tools= "http// "    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;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 (; list = (ListView) Findviewbyid (; 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;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 ~


Pretty UI Design for Android-swipe background, transparent list

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.