Android boot page design, android boot

Android boot page design, android boot

After you install an application, a boot page appears when you open the application for the first time. Generally, three or four images are displayed. As we slide, on the last page, there will be a button to enter the application. You can click this button to enter the application. In fact, there is not much complexity in this button. The switch is completed by a ViewPager, after talking about this, let's start to explain the Code:
Before starting our design, we need to make some preparations. First, we create a new project, select the project, right-click properties, select Java Build Path, and click Libraries on the right, click Add jar again to import the Android-support-v4.jar under our project lib, and finally do not forget to select.

　　

Step 2: we need to prepare six images, four for switching, and the other two are the small dots below the switching image that we often see.

　　

With the above preparations, we can start making the results today.

Layout file (activity_main.xml ):

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: orientation = "vertical"> <android. support. v4.view. viewPager android: id = "@ + id/viewpager" android: layout_width = "fill_parent" android: layout_height = "fill_parent"/> <LinearLayout android: id = "@ + id/ll" android: orientation = "horizontal" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_marginBottom = "24.0dip" android: authorization = "true" android: layout_centerHorizontal = "true"> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: padding = "15.0dip" android: src = "@ drawable/dot"/> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: padding = "15.0dip" android: src = "@ drawable/dot"/> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: padding = "15.0dip" android: src = "@ drawable/dot"/> <ImageView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_gravity = "center_vertical" android: clickable = "true" android: padding = "15.0dip" android: src = "@ drawable/dot"/> </LinearLayout> <Button android: id = "@ + id/button" android: visibility = "gone" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: layout_above = "@ + id/ll" android: layout_centerHorizontal = "true" android: layout_marginBottom = "52dp" android: text = "Enter application"/> </RelativeLayout>

Now that we need to use ViewPager to switch images, we need to rewrite a PagerAdapter (ViewPagerAdapter. java)

Public class ViewPagerAdapter extends PagerAdapter {// interface List private List <View> views; public ViewPagerAdapter (List <View> views) {this. views = views;} // The interface for destroying the location of arg1 @ Override public void destroyItem (View arg0, int arg1, Object arg2) {(ViewPager) arg0 ). removeView (views. get (arg1);} @ Override public void finishUpdate (View arg0) {// TODO Auto-generated method stub} // obtain the current interface count @ Override public int GetCount () {if (views! = Null) {return views. size () ;}return 0 ;}// interface for initializing the location of arg1 @ Override public Object instantiateItem (View arg0, int arg1) {(ViewPager) arg0 ). addView (views. get (arg1), 0); return views. get (arg1);} // determine whether the interface is generated by the Object @ Override public boolean isViewFromObject (View arg0, Object arg1) {return (arg0 = arg1 );} @ Override public void restoreState (Parcelable arg0, ClassLoader arg1) {// TODO Auto-generated method stub} @ Override public Parcelable saveState () {// TODO Auto-generated method stub return null;} @ Override public void startUpdate (View arg0) {// TODO Auto-generated method stub }}

Next we will write a custom attribute to implement small dot changes and place it in the drawable file (dot. xml)

<?xml version="1.0" encoding="UTF-8"?>  <selector      xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_enabled="true" android:drawable="@drawable/white" />      <item android:state_enabled="false" android:drawable="@drawable/blank" />  </selector>

Finally, our MainActivity. java:

Public class MainActivity extends Activity implements OnClickListener, OnPageChangeListener {private ViewPager vp; private ViewPagerAdapter vpAdapter; private List <View> views; private Button button; // Bootstrap image resource private static final int [] pics = {R. drawable. imager1, R. drawable. imager2, R. drawable. imager3, R. drawable. imager4}; // private ImageView [] dots image in the bottom shop; // record the currently selected position private int currentIndex;/** Called when the activity is first created. * // @ Override public void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState );
RequestWindowFeature (Window. FEATURE_NO_TITLE); // setContentView (R. layout. activity_main); views = new ArrayList <View> (); LinearLayout. layoutParams mParams = new LinearLayout. layoutParams (LinearLayout. layoutParams. FILL_PARENT, LinearLayout. layoutParams. FILL_PARENT); // initialize the bootstrap image list for (int I = 0; I <pics. length; I ++) {ImageView iv = new ImageView (this); iv. setLayoutParams (mParams); iv. setImageResource (pics [I]); views. add (iv);} // jump button Button button = (Button) findViewById (R. id. button); button. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {Toast. makeText (getApplication (), "Enter application", Toast. LENGTH_SHORT ). show (); // MainActivity. this. startActivity (new Intent (). setClass (MainActivity. this, LoginActivity. class); // MainActivity. this. finish () ;}}); vp = (ViewPager) findViewById (R. id. viewpager); // initialize Adapter vpAdapter = new ViewPagerAdapter (views); vp. setAdapter (vpAdapter); // bind the callback vp. setOnPageChangeListener (this); // initialize the initDots ();} private void initDots () {LinearLayout ll = (LinearLayout) findViewById (R. id. ll); dots = new ImageView [pics. length]; // cyclically retrieve the smaller image for (int I = 0; I <pics. length; I ++) {dots [I] = (ImageView) ll. getChildAt (I); dots [I]. setEnabled (true); // both are set to gray dots [I]. setOnClickListener (this); dots [I]. setTag (I); // set the location tag for easy retrieval.} currentIndex = 0; dots [currentIndex]. setEnabled (false); // set to white, that is, the selected status}/*** set the current Boot page */private void setCurView (int position) {if (position <0 | position> = pics. length) {return;} vp. setCurrentItem (position);}/*** selected for the current Boot point */private void setCurDot (int positon) {if (positon <0 | positon> pics. length-1 | currentIndex = positon) {return;} // when sliding to the last image, the hidden Button is displayed if (positon = pics. length-1) {button. setVisibility (1);} else {button. setVisibility (View. GONE);} // draw the dot dots [positon] at the bottom. setEnabled (false); dots [currentIndex]. setEnabled (true); currentIndex = positon;} // call @ Override public void onPageScrollStateChanged (int arg0) when the sliding status changes) {// TODO Auto-generated method stub} // call @ Override public void onPageScrolled when the current page is slide (int arg0, float arg1, int arg2) {// TODO Auto-generated method stub} // call @ Override public void onPageSelected (int arg0) when a new page is selected) {// setCurDot (arg0);} @ Override public void onClick (View v) {int position = (Integer) v. getTag (); setCurView (position); setCurDot (position );}}

:

　　

I hope it will be helpful to you in the middle of the night, and I will try again later. This kind of switching looks monotonous. You can refer to my previous blog about how to change the animation effect of ViewPager.