Viewpager for Android _ How to Use viewpager _ viewpager to simulate Weibo Special Effects

Source: Internet
Author: User

First, we will show you what viewpager looks like. If you have used the Sina Weibo client, you should be familiar with the following pictures. (The pictures are not very beautiful, but they mainly mean that, let's take a look ....) the area below that allows you to slide back and forth to display different pages is a viewpager, which is not explained here.

The layout file is as follows:

Activity_weibo.xml

<LinearLayout 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"    android:orientation="vertical"><LinearLayout     android:id="@+id/ll"    android:layout_width="fill_parent"    android:layout_height="40dp"    android:background="#ffffff">    <TextView         android:id="@+id/tt1"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_weight="1"        android:text="@string/tt1"        android:gravity="center"        android:textColor="#000000"        android:textSize="20dp"/>    <TextView         android:id="@+id/tt2"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_weight="1"        android:text="@string/tt2"        android:textSize="20dp"        android:textColor="#000000"/>    <TextView android:id="@+id/tt3"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_weight="1"        android:text="@string/tt3"        android:textSize="20dp"        android:textColor="#000000"/></LinearLayout><ImageView    android:id="@+id/cursor"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:scaleType="matrix"    android:src="@drawable/image"/>   <android.support.v4.view.ViewPager       android:id="@+id/vPager"       android:layout_width="wrap_content"       android:layout_height="0dp"       android:layout_weight="1"       android:layout_gravity="center"       android:background="#000000"       android:flipInterval="30"       android:persistentDrawingCache="animation"       /></LinearLayout>

Lay1.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <View         android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#66FF33"/></LinearLayout>

Lay2.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <View         android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#FF3333"/></LinearLayout>

Lay3.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <View         android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="#3300FF"/></LinearLayout>

 

The following is the Java code:

Package Jason. viewpagerdemo; import Java. util. arraylist; import Java. util. list; import android. app. activity; import android. graphics. bitmapfactory; import android. graphics. matrix; import android. OS. bundle; import android. support. v4.view. pageradapter; import android. support. v4.view. viewpager; import android. support. v4.view. viewpager. onpagechangelistener; import android. util. displaymetrics; import android. view. Display; import android. view. layoutinflater; import android. view. menu; import android. view. view; import android. view. viewgroup; import android. view. view. onclicklistener; import android. view. animation. animation; import android. view. animation. translateanimation; import android. widget. imageview; import android. widget. textview; import android. widget. toast; public class weiboactivity extends activity {private vie Wpager viewpager; // slidable page card content, that is, the private imageview of our main exercise; // animated images similar to cursors, this is the slide slider private textview textview1, textview2, textview3; private list <View> views; // page list private int offset = 0; // offset of the cursor movement private int currentindex = 0; // the current page number private int bmp w; // The cursor width private view view1, view2, view3; // each page card @ overrideprotected void oncreate (bundle savedinstancestate) {super. oncreate (savedinstancestate ); Setcontentview (R. layout. activity_weibo); initimageview (); inittextview (); initviewpager ();} private void initviewpager () {// todo auto-generated method stubviewpager = (viewpager) findviewbyid (R. id. vpager); views = new arraylist <View> (); layoutinflater Inflater = getlayoutinflater (); // The inflaterview1 = Inflater is introduced in the previous articles. inflate (R. layout. lay1, null); view2 = Inflater. inflate (R. layout. lay2, null); view3 = Inflater. inflate (R. layout. lay3, null); views. add (view1); views. add (view2); views. add (view3); viewpager. setadapter (New myviewpageradapter (Views); // Like listview, viewpager also requires an adapter and then overwrites viewpager in the face of pageradapter. setcurrentitem (0); // the first card page viewpager is displayed by default. setonpagechangelistener (New myonpagechangelistener (); // Add a listener to viewpager} private void inittextview () {textview1 = (textview) findviewbyid (R. id. TT1); textview2 = (Textview) findviewbyid (R. id. TT2); textview3 = (textview) findviewbyid (R. id. TT3); textview1.setonclicklistener (New myonclicklis (0); textview2.setonclicklistener (New myonclicklis (1); textview3.setonclicklistener (New myonclicklis (2 )); // These listeners ensure that the page can also slide when you click the label in the header} private void initimageview () {imageview = (imageview) findviewbyid (R. id. cursor); bmp w = imageview. getwidth (); displaymetrics = N EW displaymetrics (); getwindowmanager (). getdefadisplay display (). getmetrics (displaymetrics); int screen = displaymetrics. widthpixels; offset = (screen-BMP w * 3)/6; // This place is to set an offset for each left and right of each tag. There are 3 tags and 6 offsets in total, matrix matrix = new matrix (); // I will write another article about matrix later. posttranslate (offset, 0); this is to put the cursor under the first tag imageview. setimagematrix (matrix);} private class myonclicklis implements onclicklistener {private int I Ndex; Public myonclicklis (INT index) {// note that the listener here has a default constructor with parameters to determine which tag you click this. index = index ;}@ overridepublic void onclick (view v) {viewpager. setcurrentitem (INDEX) ;}/// The following is a relatively important point. We mentioned previously to rewrite pageradapter. During rewriting, We need to rewrite at least four methods, of course, we only write these four methods here. public class myviewpageradapter extends pageradapter {private list <View> mlistview; Public myviewpageradapter (list <View> views) {// todo auto-generated Constructor Stubthis. mlistview = views;} @ overridepublic void destroyitem (viewgroup container, int position, object) {// todo auto-generated method stubcontainer. removeview (mlistview. get (position) ;}@ overridepublic object instantiateitem (viewgroup container, int position) {container. addview (mlistview. get (position); Return mlistview. get (position) ;}@ overridepublic int getcount () {// todo auto-generated me Thod stubreturn mlistview. size () ;}@ overridepublic Boolean isviewfromobject (view arg0, object arg1) {// todo auto-generated method stubreturn arg0 == arg1 ;}} public class myonpagechangelistener implements onpagechangelistener {int one = offset * 2 + bmp w; // Card 1 --> Card 2 offset int two = one * 2; // Card 2 --> card 3 offset @ overridepublic void onpagescrollstatechanged (INT arg0) {// when arg0 = 1, it indicates that it is sliding, arg0 = 2 indicates that the slide is complete, ar When G0 = 0, it indicates that nothing is done, that is, it is stopped there .} @ Overridepublic void onpagescrolled (INT arg0, float arg1, int arg2) {// indicates that when the previous page slides to the next page, method called before sliding on the previous page} @ overridepublic void onpageselected (INT arg0) {// arg0 indicates that the page you selected is animation = new translateanimation (one * currentindex, one * arg0, 0, 0); currentindex = arg0; animation. setfillafter (true); // true: the animation stays at the end of the animation. setduration (300); imageview. startanimation (animation); toast. maketext (weiboactivity. this, "the card is moved to page" + arg0 + ", toast. length_short ). show ();}}}

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: info-contact@alibabacloud.com 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.