Android ViewPager制作新手導航頁(動態(tài)加載)
更新時間：2016年05月20日 17:28:53 作者：TheMrNice
這篇文章主要為大家詳細介紹了Android ViewPager制作新手導航頁，了解什么是動態(tài)加載指示器，感興趣的小伙伴們可以參考一下
我們來講個老生常談的話題，估計大家都用過的—>ViewPager，用它來做新手導航頁面，雖然這次也是講這個，但是和以往的用法可能有些不同，大家都看到標題進來的，應該知道的是：動態(tài)加載指示器。
什么叫動態(tài)加載呢，是不是感覺很高大上呢，其實呢就是動態(tài)的去加載指示器的數(shù)量的，而不是在布局文件中寫死。希望看了這篇文章大家對ViewPager有新的認識。
看到這個效果大家應該都很不屑吧，今天講這個就是為了讓大家有新的認識。好了，好好聽，開始了。
這個動態(tài)加載就是為了動態(tài)的加載下面的灰色圓點指示器和紅色圓點指示器，大家有沒有注意到當我滑動的時候（即切換頁面的時候）紅色圓點會跟著移動。沒錯。
第一步：
在布局文件中添加ViewPager,并添加灰色圓點和紅色圓點的布局，先來想想都用什么布局呢，首先三個灰色圓點可以用線性布局，一個紅色圓點可以采用相對布局（原因：其實紅色圓點就是覆蓋在灰色圓點上）
<RelativeLayout
android:id="@+id/rl"
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"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
第二步：
在onCreate方法中聲明ViewPager和灰色圓點和紅色圓點布局的示例（原因：因為我們需要動態(tài)加載圓點），并為ViewPager添加適配器和監(jiān)聽器。
//ViwePager
private ViewPager viewPager;
//存放三個灰色圓點的線性布局
private LinearLayout ll;
//用來存放紅色圓點和灰色圓點的相對布局
private RelativeLayout rl;
//初始化組件
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
imageViews = new ArrayList<ImageView>();
ll = (LinearLayout) findViewById(R.id.ll);
rl = (RelativeLayout) findViewById(R.id.rl);
btn = (Button) findViewById(R.id.btn);
//為ViewPager添加適配器
viewPager.setAdapter(new MyAdapter());
viewPager.setOnPageChangeListener();
第三步：
將三個圖片加到ViewPager的適配器中。
注：為了在滑動的時候不重復創(chuàng)建圖片實例，所以我們可以先將需要加載的資源的放在一個集合中，當每次滑動需要加載的時候就從集合中取出即可，這樣節(jié)省了系統(tǒng)資源。
//導航頁資源
private int[] images = new int[]{
R.drawable.guide_1,
R.drawable.guide_2,
R.drawable.guide_3,
};
//用來存放導航圖片實例（保證唯一性，滑動的時候不重復創(chuàng)建）
private List<ImageView> imageViews;
//初始化導航頁面
for (int i = 0; i < images.length; i++) {
ImageView iv = new ImageView(MainActivity.this);
iv.setImageResource(images[i]);
imageViews.add(iv);
}
//PagerAdapter有四個方法
class MyAdapter extends PagerAdapter {
//返回導航頁的個數(shù)
@Override
public int getCount() {
return images.length;
}
//判斷是否由對象生成
@Override
public boolean isViewFromObject(View view,Object object) {
return view == object;
}
//加載頁面
//ViewGroup:父控件指ViewPager
//position:當前子控件在父控件中的位置
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView iv = imageViews.get(position);
container.addView(iv);
return iv;
}
//移除頁面
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
第四步：
重要的部分來了，這一步是動態(tài)的將灰色圓點和紅色圓點添加進來，并讓紅色圓點隨著滑動也跟著一起滑動。
首先動態(tài)的添加灰色圓點和紅色圓點：
for (int i = 0; i < images.length; i++) {
ImageView iv = new ImageView(MainActivity.this);
iv.setImageResource(images[i]);
imageViews.add(iv);
//動態(tài)加載灰色圓點
ImageView gray_Iv = new ImageView(this);
gray_Iv.setImageResource(R.drawable.grar_circle);
LinearLayout.LayoutParams layoutParams =
new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
//從第二個開始有邊距
if (i > 0) {
layoutParams.leftMargin = 20; //注意單位是px
}
gray_Iv.setLayoutParams(layoutParams);
ll.addView(gray_Iv);
}
//添加紅色圓點
red_Iv = new ImageView(this);
red_Iv.setImageResource(R.drawable.red_circle);
rl.addView(red_Iv);
注：灰色圓點是從第二個開始有左邊距的，為組件動態(tài)的設置邊距的話使用布局的LayoutParams（衣服），記住三個灰色圓點使用的是哪個布局就采用那種布局的LayoutParams來進行設置。
下面就是讓紅色圓點隨著ViewPager滑動也跟著一起滑動：
//任何一個組件都可以得到視圖樹
red_Iv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
//視圖完成繪制的時候調用
@Override
public void onGlobalLayout() {
left = ll.getChildAt(1).getLeft() - ll.getChildAt(0).getLeft();
System.out.println(left);
//移除視圖樹的監(jiān)聽
red_Iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
});
//導航頁滑動的時候調用
//positionOffset:滑動的百分比（[0,1}）
@Override
public void onPageScrolled(int position, float positionOffset, int arg2) {
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) red_Iv.getLayoutParams();
layoutParams.leftMargin = (int) (left * positionOffset + position * left);
red_Iv.setLayoutParams(layoutParams);
}
注：這里需要明白一個概念–>視圖樹，為什么要明白這個呢，因為我們是動態(tài)的將灰色圓點添加進去，不知道這個視圖什么才能繪制好，所以需要監(jiān)聽到整個視圖的繪制狀態(tài)，任何一個組件都可以拿到視圖樹，對視圖樹的繪制進行監(jiān)聽。這樣就可以得到灰色圓點之間的距離，大家又會問一開始添加灰色圓點的時候不是設置了左邊距嗎？？？是的，但是這個單位是px，而現(xiàn)在是dp不能直接設置。
灰色圓點之間的距離：
left = ll.getChildAt(1).getLeft() - ll.getChildAt(0).getLeft();
public void onPageScrolled(int position, float positionOffset, int arg2)中參數(shù)positionOffset指滑動的百分比（范圍[0-1））
現(xiàn)在就可以知道紅色圓點需要滑動多少了。
//導航頁滑動的時候調用
//positionOffset:滑動的百分比([0,1))
@Override
public void onPageScrolled(int position, float positionOffset, int arg2) {
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) red_Iv.getLayoutParams();
layoutParams.leftMargin = (int) (left * positionOffset + position * left);
red_Iv.setLayoutParams(layoutParams);
}
第五步：
新手導航頁，一般移動到最后一頁的時候會有個按鈕跳到主界面。這個只需要在導航頁被選擇的時候設置一下即可
//導航頁被選擇的時候調用
@Override
public void onPageSelected(int position) {
//滑動到最后一頁，顯示按鈕
if (position == images.length - 1) {
btn.setVisibility(View.VISIBLE);
//不是最后一頁，不顯示按鈕
}else {
btn.setVisibility(View.GONE);
}
}
核心代碼：
布局文件：
<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="com.example.viewpager.MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
<RelativeLayout
android:id="@+id/rl"
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"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
<Button
android:layout_width="wrap_content"
android:id="@+id/btn"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="50dp"
android:layout_height="wrap_content"
android:text="體驗"
android:visibility="gone"
/>
</RelativeLayout>
MainActivity.java
public class MainActivity extends Activity {
//ViwePager
private ViewPager viewPager;
private Button btn;
//導航頁資源
private int[] images = new int[]{
R.drawable.guide_1,
R.drawable.guide_2,
R.drawable.guide_3,
};
//圓點與圓點之間的邊距
private int left;
//用來存放導航圖片實例（保證唯一性，滑動的時候不重復創(chuàng)建）
private List<ImageView> imageViews;
//存放三個灰色圓點的線性布局
private LinearLayout ll;
//用來存放紅色圓點和灰色圓點的相對布局
private RelativeLayout rl;
//紅色圓點ImageView
private ImageView red_Iv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//初始化導航頁面和灰色圓點
for (int i = 0; i < images.length; i++) {
ImageView iv = new ImageView(MainActivity.this);
iv.setImageResource(images[i]);
imageViews.add(iv);
//動態(tài)加載灰色圓點
ImageView gray_Iv = new ImageView(this);
gray_Iv.setImageResource(R.drawable.grar_circle);
LinearLayout.LayoutParams layoutParams =
new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
//從第二個開始有邊距
if (i > 0) {
layoutParams.leftMargin = 20; //注意單位是px
}
gray_Iv.setLayoutParams(layoutParams);
ll.addView(gray_Iv);
}
red_Iv = new ImageView(this);
red_Iv.setImageResource(R.drawable.red_circle);
rl.addView(red_Iv);
//任何一個組件都可以得到視圖樹
red_Iv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
//視圖完成繪制的時候調用
@Override
public void onGlobalLayout() {
left = ll.getChildAt(1).getLeft() - ll.getChildAt(0).getLeft();
System.out.println(left);
//移除視圖樹的監(jiān)聽
red_Iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
});
//為ViewPager添加適配器
viewPager.setAdapter(new MyAdapter());
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
//導航頁被選擇的時候調用
@Override
public void onPageSelected(int position) {
if (position == images.length - 1) {
btn.setVisibility(View.VISIBLE);
}else {
btn.setVisibility(View.GONE);
}
}
//導航頁滑動的時候調用
//positionOffset:滑動的百分比（[0,1}）
@Override
public void onPageScrolled(int position, float positionOffset, int arg2) {
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) red_Iv.getLayoutParams();
layoutParams.leftMargin = (int) (left * positionOffset + position * left);
red_Iv.setLayoutParams(layoutParams);
}
//導航頁滑動的狀態(tài)改變的時候調用
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
//初始化組件
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewPager);
imageViews = new ArrayList<ImageView>();
ll = (LinearLayout) findViewById(R.id.ll);
rl = (RelativeLayout) findViewById(R.id.rl);
btn = (Button) findViewById(R.id.btn);
}
//PagerAdapter有四個方法
class MyAdapter extends PagerAdapter {
//返回導航頁的個數(shù)
@Override
public int getCount() {
return images.length;
}
//判斷是否由對象生成
@Override
public boolean isViewFromObject(View view,Object object) {
return view == object;
}
//加載頁面
//ViewGroup:父控件指ViewPager
//position:當前子控件在父控件中的位置
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView iv = imageViews.get(position);
container.addView(iv);
return iv;
}
//移除頁面
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
大家趕緊試試吧。會有不同的認識。
以上就是本文的全部內容，希望對大家學習Android軟件編程有所幫助。
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了Flutter實現(xiàn)矩形取色器的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
本文主要介紹了Android View的事件分發(fā)機制。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
Android 中使用ExpandableListView 實現(xiàn)分組的實例
這篇文章主要介紹了Android 中使用ExpandableListView 實現(xiàn)分組的實例的相關資料,這里提供實例代碼及實現(xiàn)效果圖，需要的朋友可以參考下2016-12-12
在說事件分發(fā)之前，我們先想一個問題，在APP中我們點擊一個View的時候，事件是如何傳遞到這個View的呢？其實這就是我理解的事件分發(fā)機制。即當手指點擊屏幕時，事件傳遞到具體View的過程2022-08-08
Android 兩個ViewPager的聯(lián)動效果的實現(xiàn)
這篇文章主要介紹了Android 兩個ViewPager的聯(lián)動效果的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Android序列化實現(xiàn)接口Serializable與Parcelable詳解
我們使用 Intent 傳遞數(shù)據的時候，putExtra() 所支持的數(shù)據類型事有限的，當需要傳遞自定義對象的時候就需要序列化。Serializable更簡單但是會把整個對象進行序列化因此效率比Parcelable低一些2022-12-12
這篇文章主要為大家詳細介紹了Android觸摸事件的應用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了Android利用RecyclerView編寫聊天界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Android 側滑抽屜菜單的實現(xiàn)代碼,本文通過實例圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
本文主要介紹了Android?Framework層獲取及處理按鍵事件流程，Android系統(tǒng)的輸入事件是InputManagerService服務來監(jiān)控的，該系統(tǒng)服務在SystemServer的startOtherServices（）中初始化，更多介紹需要的小伙伴可以參考一下2022-08-08