Android practice simple tutorial-26th gun (based on ViewPager to achieve WeChat page switching effect), androidviewpager

Simple tutorial for Android-26th guns (page Switching Based on ViewPager) and androidviewpager

1. top. 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="40dp"    android:background="@drawable/title_bar"    android:gravity="center"    android:orientation="vertical" >    <TextView        android:id="@+id/title"        android:layout_width="wrap_content"        android:layout_height="30dp"        android:layout_gravity="center"        android:text="WeChat"        android:textColor="#ffffffff"        android:textSize="25dp" /></LinearLayout>

2. bottom layout file bottom. 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 = "50dp" android: background = "@ drawable/bottom_bar" android: orientation = "horizontal"> <LinearLayout android: id = "@ + id/ll_chat" android: layout_width = "0dp" android: layout_height = "fill_parent" android: layout_weight = "1" android: gravity = "center" android: orientation = "vertical"> <ImageButton android: id = "@ + id/ibtn_chat" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: background = "#0000" android: clickable = "false" android: src = "@ drawable/tab_weixin_pressed"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "chat" android: textColor = "# ffffffff"/> </LinearLayout> <LinearLayout android: id = "@ + id/ll_pengyouquan" android: layout_width = "0dp" android: layout_height = "fill_parent" android: layout_weight = "1" android: gravity = "center" android: orientation = "vertical"> <ImageButton android: id = "@ + id/ibtn_pengyouquan" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: background = "#0000" android: clickable = "false" android: src = "@ drawable/tab_find_frd_normal"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "" android: textColor = "# ffffffff"/> </LinearLayout> <LinearLayout android: id = "@ + id/ll_tongxunlu" android: layout_width = "0dp" android: layout_height = "fill_parent" android: layout_weight = "1" android: gravity = "center" android: orientation = "vertical"> <ImageButton android: id = "@ + id/ibtn_tongxunlu" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: background = "#0000" android: clickable = "false" android: src = "@ drawable/tab_address_normal"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "friend" android: textColor = "# ffffffff"/> </LinearLayout> <LinearLayout android: id = "@ + id/ll_set" android: layout_width = "0dp" android: layout_height = "fill_parent" android: layout_weight = "1" android: gravity = "center" android: orientation = "vertical"> <ImageButton android: id = "@ + id/ibtn_set" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: background = "#0000" android: clickable = "false" android: src = "@ drawable/tab_settings_normal"/> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Settings" android: textColor = "# ffffffff"/> </LinearLayout>

3. Main layout file:

<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" >    <include layout="@layout/top" />    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" >    </android.support.v4.view.ViewPager>    <include layout="@layout/bottom" /></LinearLayout>

4. Content Page Layout of four ViewPager

Tab01.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: gravity = "center" android: orientation = "vertical"> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center" android: text = "chat page" android: textSize = "30sp"> </TextView> </LinearLayout>

Tab02.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: gravity = "center" android: orientation = "vertical"> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center" android: text = "circle of friends" android: textSize = "30sp"> </TextView> </LinearLayout>

Tab03.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: gravity = "center" android: orientation = "vertical"> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center" android: text = "contact page" android: textSize = "30sp"> </TextView> </LinearLayout>

Tab04.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: gravity = "center" android: orientation = "vertical"> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center" android: text = "Settings page" android: textSize = "30sp"> </TextView> </LinearLayout>

5. MainActivity. java:

Package com. example. tabtest; import java. util. arrayList; import java. util. list; import android. app. activity; 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. view. layoutInflater; import android. view. view; import android. view. view. onClickListener; import android. view. viewGroup; import android. view. window; import android. widget. imageButton; import android. widget. linearLayout; public class MainActivity extends Activity implements OnClickListener {private ViewPager mViewPager; private PagerAdapter pagerAdapter; private List <View> mViews = new ArrayList <View> (); private LinearLayout mLLChat; private LinearLayout upload; private LinearLayout mLLAddress; private LinearLayout mLLSet; private ImageButton upload; @ define void onCreate (Bundle upload) {super. onCreate (savedInstanceState); requestWindowFeature (Window. FEATURE_NO_TITLE); setContentView (R. layout. activity_main); initView (); // initialize the control initEvent (); // click the event} private void initEvent () {mLLChat. setOnClickListener (this); mLLPengyouquan. setOnClickListener (this); mLLAddress. setOnClickListener (this); mLLSet. setOnClickListener (this); mViewPager. setOnPageChangeListener (new OnPageChangeListener () {// ViewPager sliding switching listener @ Overridepublic void onPageSelected (int arg0) {int currentItem = mViewPager. getCurrentItem (); resetImag (); switch (currentItem) {case 0: mImageButtonChat. setImageResource (R. drawable. tab_weixin_pressed); break; case 1: mImageButtonPengyouquan. setImageResource (R. drawable. tab_find_frd_pressed); break; case 2: mImageButtonAddress. setImageResource (R. drawable. tab_address_pressed); break; case 3: mImageButtonSet. setImageResource (R. drawable. tab_settings_pressed); break; default: break; }}@ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {// TODO Auto-generated method stub} @ Overridepublic void onPageScrollStateChanged (int arg0) {// TODO Auto-generated method stub});} private void initView () {/*** Initialize all controls */mViewPager = (ViewPager) findViewById (R. id. viewpager); mLLChat = (LinearLayout) findViewById (R. id. ll_chat); mLLPengyouquan = (LinearLayout) findViewById (R. id. ll_pengyouquan); mLLAddress = (LinearLayout) findViewById (R. id. ll_tongxunlu); mLLSet = (LinearLayout) findViewById (R. id. ll_set); mImageButtonChat = (ImageButton) findViewById (R. id. ibtn_chat); mImageButtonPengyouquan = (ImageButton) findViewById (R. id. ibtn_pengyouquan); mImageButtonAddress = (ImageButton) findViewById (R. id. ibtn_tongxunlu); mImageButtonSet = (ImageButton) findViewById (R. id. ibtn_set);/*** get mViews */LayoutInflater layoutInflater = LayoutInflater. from (this); View tab01 = layoutInflater. inflate (R. layout. tab01, null); View tab02 = layoutInflater. inflate (R. layout. tab02, null); View tab03 = layoutInflater. inflate (R. layout. tab03, null); View tab04 = layoutInflater. inflate (R. layout. tab04, null); mViews. add (tab01); mViews. add (tab02); mViews. add (tab03); mViews. add (tab04); // ViewPager adapter pagerAdapter = new PagerAdapter () {/*** destroy */@ Overridepublic void destroyItem (ViewGroup container, int position, Object object Object) {container. removeView (mViews. get (position);}/*** initialize */@ Overridepublic Object instantiateItem (ViewGroup container, int position) {View view = mViews. get (position); container. addView (view); return view ;}@ Overridepublic boolean isViewFromObject (View arg0, Object arg1) {return arg0 = arg1 ;}@ Overridepublic int getCount () {return mViews. size () ;}}; mViewPager. setAdapter (pagerAdapter) ;}@ Overridepublic void onClick (View v) {resetImag (); switch (v. getId () {case R. id. ll_chat: mViewPager. setCurrentItem (0); mImageButtonChat. setImageResource (R. drawable. tab_weixin_pressed); break; case R. id. ll_pengyouquan: mViewPager. setCurrentItem (1); mImageButtonPengyouquan. setImageResource (R. drawable. tab_find_frd_pressed); break; case R. id. ll_tongxunlu: mViewPager. setCurrentItem (2); mImageButtonAddress. setImageResource (R. drawable. tab_address_pressed); break; case R. id. ll_set: mViewPager. setCurrentItem (3); mImageButtonSet. setImageResource (R. drawable. tab_settings_pressed); break; default: break;}/*** set all images to unselected status */private void resetImag () {mImageButtonChat. setImageResource (R. drawable. tab_weixin_normal); mImageButtonPengyouquan. setImageResource (R. drawable. tab_find_frd_normal); mImageButtonAddress. setImageResource (R. drawable. tab_address_normal); mImageButtonSet. setImageResource (R. drawable. tab_settings_normal );}}

6. Run the instance:

If you like it, follow me! Thank you.

Source code download

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.