溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了教你使用Android制作一個引導界面，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
開發的界面（三張圖片，滑到最后一個會出現開始體驗的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);
//監聽布局是否已經完成 布局的位置是否已經確定
ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
//避免重復回調 出于兼容性考慮，使用了過時的方法
ivRedPoint.getViewTreeObserver().removeGlobalOnLayoutListener(this);
//布局完成了就獲取第一個小灰點和第二個之間left的距離
mPaintDis = llContainer.getChildAt(1).getLeft()-llContainer.getChildAt(0).getLeft();
System.out.println("距離："+mPaintDis);
}
});
//ViewPager滑動Pager監聽
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
//滑動過程中的回調
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//當滑到第二個Pager的時候，positionOffset百分比會變成0，position會變成1，所以后面要加上position*mPaintDis
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;
//在父布局控件中設置他的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++){
//創建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);
//初始化布局參數，父控件是誰，就初始化誰的布局參數
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
if (i>0){
//當添加的小圓點的個數超過一個的時候就設置當前小圓點的左邊距為10dp;
params.leftMargin=10;
}
//設置小灰點的寬高包裹內容
pointView.setLayoutParams(params);
//將小灰點添加到LinearLayout中
llContainer.addView(pointView);
}
}
class GuideAdapter extends PagerAdapter{
//item的個數
@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一起走。
上面其實是三個小灰點，然后小灰點的上面有一個小紅點，通過計算出第一個小灰點與第二個小灰點之間的距離，我們就可以用設置ViewPager的滑動監聽，然后讓小紅點跟著pager一起動(改變的是父控件中的內邊距)。
計算小灰點之間的距離時需要注意的是，必須等到布局位置確定下來的才能的到小灰點之間的距離（界面生成的過程 measure->layout(確定位置)->draw(activity的onCreate方法執行結束之后才會走此流程)），所以要設置layout的監聽：
ivRedPoint.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener()
然后的到小灰點之間的距離：
mPaintDis = llContainer.getChildAt(1).getLeft()-llContainer.getChildAt(0).getLeft();
需要注意的是這句代碼：
int letfMargin = (int)(mPaintDis*positionOffset)+position*mPaintDis;
positionOffset是當前滑動的百分比，當進入第二個page的時候，值為0，
position代表當前是第幾個page，從0開始，也就是說當我滑到第二個page的時候 mPaintDis*0+1*mPaintDis;
PS:思路總結：
1、頁面由 ViewPager + Button + RelativeLayout(LinearLayout + TextView)組成，
2、LinearLayout放的是小灰點，小灰點的個數由ViewPager的個數覺得，所以LinearLayout添加小灰點的時候是與VIewPager的圖片資源添加到集合是一起的。
3、然后小紅點就是一個TextView因為相對布局的原因，小紅點的初始位置會和小灰點的第一個點重合，
4、然后監聽ViewPager的滑動事件，通過計算第一個和第二個小灰點的左邊到LinearLayout的左邊的邊距差，來移動小紅點的位置，但是確定位置的查體須 是布局的位置已經確定，所以我們就要監聽布局是否已經確定，等確定后再去計算位置差。
上述內容就是教你使用Android制作一個引導界面，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
