Android繪制炫酷的引導(dǎo)界面

2019-10-23 19:46:47

字體：大中小

供稿：網(wǎng)友

先看一下我們要開(kāi)發(fā)的界面（三張圖片，滑到最后一個(gè)會(huì)出現(xiàn)開(kāi)始體驗(yàn)的Button，下面的小紅點(diǎn)會(huì)跟著一起滑動(dòng)）：

Android,引導(dǎo)界面

首先看一下布局文件：

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   xmlns:tools="http://schemas.android.com/tools"   android:id="@+id/activity_guide"   android:layout_width="match_parent"   android:layout_height="match_parent"   tools:context="com.coderwei.a71_zhbj.activity.GuideActivity">    <android.support.v4.view.ViewPager     android:id="@+id/vp_guide"     android:layout_width="match_parent"     android:layout_height="match_parent"     />   <Button     android:layout_centerHorizontal="true"    android:layout_alignParentBottom="true"    android:layout_marginBottom="70dp"    android:padding="10dp"    android:id="@+id/start_btn"    android:textColor="#f1eaea"   android:background="#e71616"   android:text="開(kāi)始體驗(yàn)"   android:visibility="invisible"   android:layout_width="wrap_content"   android:layout_height="wrap_content" />  <RelativeLayout    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_alignParentBottom="true"    android:layout_centerHorizontal="true"    android:layout_marginBottom="30dp">   <LinearLayout     android:id="@+id/ll_container"     android:layout_width="wrap_content"    android:layout_height="wrap_content">   </LinearLayout>  <ImageView    android:id="@+id/iv_red"   android:src="@drawable/shap_red"   android:layout_width="wrap_content"    android:layout_height="wrap_content" /> </RelativeLayout>   </RelativeLayout>

然后就是代碼了：

public class GuideActivity extends Activity {   private ViewPager mViewPager;   private int[] mImageIds = new int[]{R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};   private ArrayList<ImageView> mImageViewList;   private LinearLayout llContainer;   private ImageView ivRedPoint;   private int mPaintDis;   private Button start_btn;  @Override protected void onCreate(Bundle savedInstanceState) {   uper.onCreate(savedInstanceState);   requestWindowFeature(Window.FEATURE_NO_TITLE);   setContentView(R.layout.activity_guide);   mViewPager = (ViewPager)findViewById(R.id.vp_guide);   llContainer = (LinearLayout) findViewById(R.id.ll_container);   ivRedPoint = (ImageView) findViewById(R.id.iv_red);   start_btn = (Button) findViewById(R.id.start_btn);   initData();   GuideAdapter adapter = new GuideAdapter();   mViewPager.setAdapter(adapter);   //監(jiān)聽(tīng)布局是否已經(jīng)完成 布局的位置是否已經(jīng)確定    ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {      @Override      public void onGlobalLayout() {       //避免重復(fù)回調(diào)    出于兼容性考慮，使用了過(guò)時(shí)的方法        ivRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);        //布局完成了就獲取第一個(gè)小灰點(diǎn)和第二個(gè)之間left的距離        mPaintDis =  llContainer.getChildAt(1).getLeft()-llContainer.getChildAt(0).getLeft();        System.out.println("距離："+mPaintDis);      }   });  //ViewPager滑動(dòng)Pager監(jiān)聽(tīng)  mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {     //滑動(dòng)過(guò)程中的回調(diào)     @Override     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {     //當(dāng)滑到第二個(gè)Pager的時(shí)候，positionOffset百分比會(huì)變成0，position會(huì)變成1，所以后面要加上position*mPaintDis     int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;     //在父布局控件中設(shè)置他的leftMargin邊距      RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)ivRedPoint.getLayoutParams();     params.leftMargin = letfMargin;     ivRedPoint.setLayoutParams(params);     }     @Override      public void onPageSelected(int position) {        System.out.println("position:"+position);        if (position==mImageViewList.size()-1){         start_btn.setVisibility(View.VISIBLE);       }     }     @Override      public void onPageScrollStateChanged(int state) {       System.out.println("state:"+state);      }    });  }  private void initData(){    mImageViewList = new ArrayList<>();    for (int i=0; i<mImageIds.length; i++){      //創(chuàng)建ImageView把mImgaeViewIds放進(jìn)去      ImageView view = new ImageView(this);      view.setBackgroundResource(mImageIds[i]);      //添加到ImageView的集合中      mImageViewList.add(view);     //小圓點(diǎn)  一個(gè)小灰點(diǎn)是一個(gè)ImageView     ImageView pointView = new ImageView(this);      pointView.setImageResource(R.drawable.shape);      //初始化布局參數(shù)，父控件是誰(shuí)，就初始化誰(shuí)的布局參數(shù)     LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);     if (i>0){       //當(dāng)添加的小圓點(diǎn)的個(gè)數(shù)超過(guò)一個(gè)的時(shí)候就設(shè)置當(dāng)前小圓點(diǎn)的左邊距為10dp;        params.leftMargin=10;      }     //設(shè)置小灰點(diǎn)的寬高包裹內(nèi)容      pointView.setLayoutParams(params);      //將小灰點(diǎn)添加到LinearLayout中      llContainer.addView(pointView);    }   } class GuideAdapter extends PagerAdapter{    //item的個(gè)數(shù)    @Override    public int getCount() {       return mImageViewList.size();    }    @Override     public boolean isViewFromObject(View view, Object object) {       return view == object;    }     //初始化item布局     @Override     public Object instantiateItem(ViewGroup container, int position) {       ImageView view = mImageViewList.get(position);      container.addView(view);      return view;    }     //銷毀item    @Override    public void destroyItem(ViewGroup container, int position, Object object) {      container.removeView((View)object);    }  } }

小灰點(diǎn)：

<?xml version="1.0" encoding="utf-8"?><shape   android:shape="oval"   xmlns:android="http://schemas.android.com/apk/res/android">   <!--小灰點(diǎn)-->   <solid android:color="#cccccc"/>   <size android:width="10dp" android:height="10dp"/> </shape>

小紅點(diǎn)：

<?xml version="1.0" encoding="utf-8"?> <shape   android:shape="oval"   xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#f00"/>   <size android:width="10dp" android:height="10dp"/> </shape>

ViewPage都很簡(jiǎn)單，上一個(gè)博文也詳細(xì)介紹了的，這里就不細(xì)說(shuō)了，主要是下面的小紅點(diǎn)跟著Pager一起走。

上面其實(shí)是三個(gè)小灰點(diǎn)，然后小灰點(diǎn)的上面有一個(gè)小紅點(diǎn)，通過(guò)計(jì)算出第一個(gè)小灰點(diǎn)與第二個(gè)小灰點(diǎn)之間的距離，我們就可以用設(shè)置ViewPager的滑動(dòng)監(jiān)聽(tīng)，然后讓小紅點(diǎn)跟著pager一起動(dòng)(改變的是父控件中的內(nèi)邊距)。

計(jì)算小灰點(diǎn)之間的距離時(shí)需要注意的是，必須等到布局位置確定下來(lái)的才能的到小灰點(diǎn)之間的距離（界面生成的過(guò)程 measure->layout(確定位置)->draw(activity的onCreate方法執(zhí)行結(jié)束之后才會(huì)走此流程)），所以要設(shè)置layout的監(jiān)聽(tīng)：

ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener()

然后的到小灰點(diǎn)之間的距離：

mPaintDis = llContainer.getChildAt(1).getLeft()-llContainer.getChildAt(0).getLeft();

需要注意的是這句代碼：
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;

positionOffset是當(dāng)前滑動(dòng)的百分比，當(dāng)進(jìn)入第二個(gè)page的時(shí)候，值為0，
position代表當(dāng)前是第幾個(gè)page，從0開(kāi)始，也就是說(shuō)當(dāng)我滑到第二個(gè)page的時(shí)候 mPaintDis*0+1*mPaintDis;

PS:思路總結(jié)：

　　1、頁(yè)面由 ViewPager + Button + RelativeLayout(LinearLayout + TextView)組成，
　　2、LinearLayout放的是小灰點(diǎn)，小灰點(diǎn)的個(gè)數(shù)由ViewPager的個(gè)數(shù)覺(jué)得，所以LinearLayout添加小灰點(diǎn)的時(shí)候是與VIewPager的圖片資源添加到集合是一起的。
　　3、然后小紅點(diǎn)就是一個(gè)TextView因?yàn)橄鄬?duì)布局的原因，小紅點(diǎn)的初始位置會(huì)和小灰點(diǎn)的第一個(gè)點(diǎn)重合，
　　4、然后監(jiān)聽(tīng)ViewPager的滑動(dòng)事件，通過(guò)計(jì)算第一個(gè)和第二個(gè)小灰點(diǎn)的左邊到LinearLayout的左邊的邊距差，來(lái)移動(dòng)小紅點(diǎn)的位置，但是確定位置的查體須　　是布局的位置已經(jīng)確定，所以我們就要監(jiān)聽(tīng)布局是否已經(jīng)確定，等確定后再去計(jì)算位置差。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。

注：相關(guān)教程知識(shí)閱讀請(qǐng)移步到Android開(kāi)發(fā)頻道。

上一篇：Android viewpager 3D畫(huà)廊的實(shí)現(xiàn)方法

下一篇：android實(shí)現(xiàn)App活動(dòng)定時(shí)自動(dòng)跳轉(zhuǎn)效果