The first time the Android Application is opened, the implementation of the guiding interface, and the android Interface

The first time the Android Application is opened, the implementation of the guiding interface, and the android Interface

Reprinted please indicate the source, thank you http://blog.csdn.net/harryweasley/article/details/42079167

First, let's talk about the following ideas: 1. Use Preference to store data to record whether the software was opened for the first time

2. Use ViewPager to switch between several images. Draw a circle under each image using code, and the circle will change with the image.

3. In the last image, add a button click event to go to the official interface.

Although the program is simple, it is very practical.

See:

We can see that the point of the circle changes according to the image.

The following describes how:

The first is the activity_main.xml file.

<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"    tools:context=".MainActivity" >    <android.support.v4.view.ViewPager        android:id="@+id/guide_viewPager"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:background="@android:color/transparent" />    <LinearLayout        android:id="@+id/linearlayout"        android:layout_width="match_parent"        android:layout_height="30dp"        android:layout_alignParentBottom="true"        android:gravity="center_horizontal"        android:orientation="horizontal" >    </LinearLayout>  </RelativeLayout>

There is a viewPager control and LinearLayout control, in which LinearLayout is a small circle

The following are three pager_layout1.xml, pager_layout2.xml, and pager_layout3.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:background="@drawable/guide1"    android:orientation="vertical" >   </LinearLayout>

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/guide2"    android:orientation="vertical" >   </RelativeLayout>

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/guide3"     android:gravity="center"    android:orientation="vertical" >        <Button        android:id="@+id/guide_enter"        android:layout_width="match_parent"        android:layout_height="100dp"        android:layout_gravity="center_horizontal|bottom"        android:layout_marginBottom="0dp"        android:background="@android:color/transparent"         /></FrameLayout>

We can see that the first two layout are directly an image as the background, and the third is just a transparent button that imitates the "Enter now" button below. (If you have a better method, share it with me)

Next is the PreferenceUtil class, which stores the isShow value.

Package com. example. guiddemo; import android. content. context; import android. content. sharedPreferences; public class PreferenceUtil {/*** indicates whether to display the welcome page. true indicates display, false indicates not display */public static final String SHOW_GUIDE = "showguide "; /*** save to Preference */public static void setBoolean (Context context, String key, boolean value) {// get SharedPreferencesSharedPreferences preferences = context. getSharedPreferences ("preference", Context. MODE_PRIVATE); SharedPreferences. editor editor = preferences. edit (); editor. putBoolean (key, value); editor. commit ();}/*** retrieve data from Preference */public static boolean getBoolean (Context context, String key) {SharedPreferences preferences = context. getSharedPreferences ("preference", Context. MODE_PRIVATE); // return the key value. The default value of the key value is falsereturn preferences. getBoolean (key, false );}}

I don't need to say much about the operations of Preference to store and retrieve data.

The main functions are in MainActivity. I wrote detailed comments in my code.

Package com. example. guiddemo; import java. util. arrayList; import java. util. list; 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. gravity; import android. view. layoutInflater; import android. view. view; impor T android. view. view. onClickListener; import android. view. viewGroup. layoutParams; import android. widget. imageView; import android. widget. linearLayout; import android. widget. textView; public class MainActivity extends Activity {/*** display guide interface */boolean isShow = false;/*** ViewPager object */private ViewPager mViewPager; /*** load the LinearLayout of a small circle */private LinearLayout indicatorLayout;/*** set of each page of ViewPager */p Rivate List <View> views;/*** small circle under ViewPager */private ImageView [] mImageViews;/*** PagerAdapter object */private MyPagerAdapter myPagerAdapter; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); // obtain the isShow data isShow = PreferenceUtil stored by Preference. getBoolean (this, PreferenceUtil. SHOW_GUIDE); // isShow = false; if (isSh) used for debugging Ow) {initLog () ;}else {initView () ;}/ *** enter the logon interface */private void initLog () {startActivity (new Intent (this, LogActivity. class); finish () ;}/ *** enter the boot page */private void initView () {mViewPager = (ViewPager) findViewById (R. id. guide_viewPager); indicatorLayout = (LinearLayout) findViewById (R. id. linearlayout); LayoutInflater inflater = LayoutInflater. from (this); views = new ArrayList <View> (); views. add (inflate R. inflate (R. layout. pager_layout1, null); views. add (inflater. inflate (R. layout. pager_layout2, null); views. add (inflater. inflate (R. layout. pager_layout3, null); myPagerAdapter = new MyPagerAdapter (this, views); mImageViews = new ImageView [views. size ()]; drawCircl (); mViewPager. setAdapter (myPagerAdapter); mViewPager. setOnPageChangeListener (new GuidePageChangeListener ();}/*** draw a circle */private void drawCircl () {Int num = views. size (); for (int I = 0; I <num; I ++) {// instantiate each mImageViews [I] mImageViews [I] = new ImageView (this ); if (I = 0) {// the first photo is selected by default, so the first small circle is changed to icon_carousel_02mImageViews [I]. setImageResource (R. drawable. icon_carousel_02);} else {mImageViews [I]. setImageResource (R. drawable. icon_carousel_01);} // set the interval for each small circle mImageViews [I]. setPadding (7, 7, 7, 7); LinearLayout. layoutParams params = new LinearLay Out. layoutParams (LayoutParams. WRAP_CONTENT, LayoutParams. WRAP_CONTENT); params. gravity = Gravity. CENTER_VERTICAL; // Let every small circle be In the CENTER_VERTICAL (center vertical) indicatorLayout of LinearLayout. addView (mImageViews [I], params) ;}/ ***** @ author Harry page change listener event */private class GuidePageChangeListener implements OnPageChangeListener {public void onPageScrollStateChanged (int arg0) {} public void onPageScrolled (int arg0, fl Oat arg1, int arg2) {}/*** the page has changed. For the current page, change the small circle to icon_carousel_02, for other pages, change to icon_carousel_01 */public void onPageSelected (int arg0) {for (int I = 0; I <mImageViews. length; I ++) {if (arg0! = I) {mImageViews [I]. setImageResource (R. drawable. icon_carousel_01);} else {mImageViews [arg0]. setImageResource (R. drawable. icon_carousel_02) ;}}} class MyPagerAdapter extends PagerAdapter {private List <View> mViews; private Activity mContext; public MyPagerAdapter (Activity context, List <View> views) {this. mViews = views; this. mContext = context;} @ Overridepublic int getCount () {return mViews. size () ;}@ Overridepublic boolean isViewFromObject (View arg0, Object arg1) {return arg0 = arg1 ;}@ Overridepublic int getItemPosition (Object object) {return super. getItemPosition (object) ;}@ Overridepublic void destroyItem (View arg0, int arg1, Object arg2) {(ViewPager) arg0 ). removeView (mViews. get (arg1);}/** instantiate the page card. If it becomes the last page, get its button and add the Click Event */@ Overridepublic Object instantiateItem (View arg0, int arg1) {(ViewPager) arg0 ). addView (mViews. get (arg1), 0); if (arg1 = mViews. size ()-1) {TextView enterBtn = (TextView) arg0.findViewById (R. id. guide_enter); enterBtn. setOnClickListener (new OnClickListener () {@ Overridepublic void onClick (View v) {// save isShow as true, and enter the logon interface PreferenceUtil. setBoolean (mContext, PreferenceUtil. SHOW_GUIDE, true); initLog () ;}}) ;}return mViews. get (arg1 );}}}

I have finished writing the main code. Although it is relatively simple, it is very practical and I hope to help you.

For more information about ViewPager, see this blog.

Http://blog.csdn.net/wangjinyu501/article/details/8169924

My demo:

Http://download.csdn.net/detail/harryweasley/8278633