Is a man next layer 100 [the first layer] -- high imitation WeChat interface (4)

In the previous article "men are on the next layer [the first layer] -- high imitation interface (3)", we completed the login. This article describes a short loading and guiding interface after the login is complete.

Loading interface:

<RelativeLayout 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"> <RelativeLayout android: layout_width = "180dp" android: layout_height = "180dp" android: layout_centerInParent = "true" android: background = "@ drawable/loading_bg"> <LinearLayout android: layout_width = "fill_parent" Android: layout_height = "fill_parent" android: gravity = "center" android: orientation = "vertical"> <ProgressBar android: id = "@ + id/progressBar1" style = "? Android: attr/progressBarStyleLarge "android: layout_width =" wrap_content "android: layout_height =" wrap_content "android: layout_gravity =" Hangzhou "/> <TextView android: layout_width =" wrap_content "android: layout_height = "wrap_content" android: text = "logging on" android: layout_marginTop = "10dp" android: textColor = "# fff" android: textSize = "20sp"/> </LinearLayout> </RelativeLayout>

Defines a ProgressBar. The effect is as follows:

Let's take a look at the implementation of the boot interface.

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >     <android.support.v4.view.ViewPager        android:id="@+id/whatsnew_viewpager"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center" >       </android.support.v4.view.ViewPager>          <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="horizontal"        >                  <LinearLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_gravity="bottom"        android:layout_marginBottom="30dp"         android:gravity="center_horizontal"     >                        <ImageView            android:id="@+id/page0"        android:layout_width="wrap_content"        android:layout_height="wrap_content"                     android:scaleType="matrix"        android:src="@drawable/page_now" />            <ImageView            android:id="@+id/page1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="10dp"                     android:scaleType="matrix"        android:src="@drawable/page" />            <ImageView            android:id="@+id/page2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="10dp"                        android:scaleType="matrix"        android:src="@drawable/page" />            <ImageView            android:id="@+id/page3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:layout_marginLeft="10dp"                       android:scaleType="matrix"        android:src="@drawable/page" />            <ImageView            android:id="@+id/page4"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:layout_marginLeft="10dp"                       android:scaleType="matrix"        android:src="@drawable/page" />            <ImageView            android:id="@+id/page5"        android:layout_width="wrap_content"        android:layout_height="wrap_content"         android:layout_marginLeft="10dp"                       android:scaleType="matrix"        android:src="@drawable/page" />                               </LinearLayout>                   </LinearLayout>       </FrameLayout>

In the above we used a ViewPager component, the role of this component is when the picture can slide left and right, the use of detailed instructions: http://www.uml.org.cn/mobiledev/201211294.asp

Set the adapter of the ViewPage and the selected ImageView in the lower part as follows:

Package com. example. weixin. activity; import java. util. arrayList; import android. app. activity; import android. content. intent; 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. widget. imageView; import com. example. weixin. r; public class Whatsnew extends Activity {private ViewPager mViewPager; private ImageView mPage0; private ImageView mPage1; private ImageView mPage2; private ImageView mPage3; private ImageView mPage4; private ImageView mPage5; private int currIndex = 0; @ Override public void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. whatsnew_viewpager); mViewPager = (ViewPager) findViewById (R. id. whatsnew_viewpager); mViewPager. setOnPageChangeListener (new MyOnPageChangeListener (); mPage0 = (ImageView) findViewById (R. id. page0); mPage1 = (ImageView) findViewById (R. id. page1); mPage2 = (ImageView) findViewById (R. id. page2); mPage3 = (ImageView) findViewById (R. id. page3); mPage4 = (ImageView) findViewById (R. id. page4); mPage5 = (ImageView) findViewById (R. id. page5); // load the View to be displayed by page into the array LayoutInflater mLi = LayoutInflater. from (this); View view1 = mLi. inflate (R. layout. whats1, null); View view2 = mLi. inflate (R. layout. whats2, null); View view3 = mLi. inflate (R. layout. whats3, null); View view4 = mLi. inflate (R. layout. whats4, null); View view5 = mLi. inflate (R. layout. whats5, null); View view6 = mLi. inflate (R. layout. whats6, null); // view data final ArrayList <View> views = new ArrayList <View> (); views. add (view1); views. add (view2); views. add (view3); views. add (view4); views. add (view5); views. add (view6); // fill in the ViewPager data adapter PagerAdapter mPagerAdapter = new PagerAdapter () {@ Overridepublic boolean isViewFromObject (View arg0, Object arg1) {return arg0 = arg1 ;} @ Overridepublic int getCount () {return views. size () ;}@ Overridepublic void destroyItem (View container, int position, Object object Object) {(ViewPager) container ). removeView (views. get (position) ;}@ Overridepublic Object instantiateItem (View container, int position) {(ViewPager) container ). addView (views. get (position); return views. get (position) ;}}; mViewPager. setAdapter (mPagerAdapter);} public class MyOnPageChangeListener implements OnPageChangeListener {@ Overridepublic void onPageSelected (int arg0) {switch (arg0) {case 0: aggregate (getResources (). getDrawable (R. drawable. page_now); mPage1.setImageDrawable (getResources (). getDrawable (R. drawable. page); break; case 1: mPage1.setImageDrawable (getResources (). getDrawable (R. drawable. page_now); mPage0.setImageDrawable (getResources (). getDrawable (R. drawable. page); mPage2.setImageDrawable (getResources (). getDrawable (R. drawable. page); break; case 2: mPage2.setImageDrawable (getResources (). getDrawable (R. drawable. page_now); mPage1.setImageDrawable (getResources (). getDrawable (R. drawable. page); mPage3.setImageDrawable (getResources (). getDrawable (R. drawable. page); break; case 3: mPage3.setImageDrawable (getResources (). getDrawable (R. drawable. page_now); mPage4.setImageDrawable (getResources (). getDrawable (R. drawable. page); mPage2.setImageDrawable (getResources (). getDrawable (R. drawable. page); break; case 4: mPage4.setImageDrawable (getResources (). getDrawable (R. drawable. page_now); mPage3.setImageDrawable (getResources (). getDrawable (R. drawable. page); mPage5.setImageDrawable (getResources (). getDrawable (R. drawable. page); break; case 5: mPage5.setImageDrawable (getResources (). getDrawable (R. drawable. page_now); mPage4.setImageDrawable (getResources (). getDrawable (R. drawable. page); break;} currIndex = arg0; // animation. setFillAfter (true); // True: the image stops at the animation end position. // animation. setDuration (300); // mPageImg. startAnimation (animation) ;}@ Overridepublic void onPageScrolled (int arg0, float arg1, int arg2) {}@ Overridepublic void merge (int arg0) {}} public void startbutton (View v) {Intent intent = new Intent (); intent. setClass (Whatsnew. this, WhatsnewDoor. class); startActivity (intent); this. finish ();}}

The final running effect is as follows: