欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年02月17日 09:52:54   作者：zhangjin12312  
這篇文章主要為大家詳細介紹了Android繪制炫酷引導(dǎo)界面的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

先看一下我們要開發(fā)的界面（三張圖片，滑到最后一個會出現(xiàn)開始體驗的Button，下面的小紅點會跟著一起滑動）：


首先看一下布局文件：

 <?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="開始體驗"
   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)聽布局是否已經(jīng)完成 布局的位置是否已經(jīng)確定
    ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
      @Override
      public void onGlobalLayout() {
       //避免重復(fù)回調(diào)    出于兼容性考慮，使用了過時的方法
        ivRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);
        //布局完成了就獲取第一個小灰點和第二個之間left的距離
        mPaintDis =  llContainer.getChildAt(1).getLeft()-llContainer.getChildAt(0).getLeft();
        System.out.println("距離："+mPaintDis);
      }
   });

  //ViewPager滑動Pager監(jiān)聽
  mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
     //滑動過程中的回調(diào)
     @Override
     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
     //當(dāng)滑到第二個Pager的時候，positionOffset百分比會變成0，position會變成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放進去
      ImageView view = new ImageView(this);
      view.setBackgroundResource(mImageIds[i]);
      //添加到ImageView的集合中
      mImageViewList.add(view);

     //小圓點  一個小灰點是一個ImageView
     ImageView pointView = new ImageView(this);
      pointView.setImageResource(R.drawable.shape);
      //初始化布局參數(shù)，父控件是誰，就初始化誰的布局參數(shù)
     LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
     if (i>0){
       //當(dāng)添加的小圓點的個數(shù)超過一個的時候就設(shè)置當(dāng)前小圓點的左邊距為10dp;
        params.leftMargin=10;
      }
     //設(shè)置小灰點的寬高包裹內(nèi)容
      pointView.setLayoutParams(params);
      //將小灰點添加到LinearLayout中
      llContainer.addView(pointView);
    }
   }

 class GuideAdapter extends PagerAdapter{
    //item的個數(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);
    }
  }
 }

小灰點：

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

小紅點：

<?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都很簡單，上一個博文也詳細介紹了的，這里就不細說了，主要是下面的小紅點跟著Pager一起走。

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

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

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

然后的到小灰點之間的距離：

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

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

positionOffset是當(dāng)前滑動的百分比，當(dāng)進入第二個page的時候，值為0，
position代表當(dāng)前是第幾個page，從0開始，也就是說當(dāng)我滑到第二個page的時候 mPaintDis*0+1*mPaintDis;

PS:思路總結(jié)：

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論