02 Anykey左右滑動布局ViewPager
目錄
1. 先看一下最終的效果圖
如圖所示，標題欄有兩個文字標簽和一個指示器，點擊可以左右切換，下面空白的地方裝載分頁，滑動可以左右切換。這是本章要做出來的功能。
2. 制作主界面layout_main.xml
在主界面中，包含了一個頂部的標簽欄以及一個可以裝載子頁面的ViewPager布局。代碼如下：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.likianta.anykey.MainActivity">
<!--LinearLayout代替原標題欄的位置-->
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<!--?attr/actionBarSize表示匹配原actionBar高度-->
<!--顯示兩個標題-->
<TextView
android:id="@+id/title_all"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1.0"
android:gravity="center_vertical|right"
android:padding="15dp"
android:text="全部"
android:textColor="@color/mycolorText1"
android:textSize="20dp" />
<TextView
android:id="@+id/title_new"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1.0"
android:gravity="center_vertical|left"
android:padding="15dp"
android:text="新增"
android:textColor="@color/mycolorText2"
android:textSize="20dp" />
<!--這里設置的兩個文本的初始狀態是文字1是深色#000000，文字2是淺色#8e8e8e。
之后會在函數中實現點擊變色的功能-->
</LinearLayout>
<!--制作線條，line1是標題欄下的陰影-->
<TextView
android:id="@+id/shadow_line1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignBottom="@id/linearLayout"
android:background="@color/mycolorLineShadow" />
<!--indicator是緊貼着文字下面的指示條-->
<ImageView
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_above="@id/shadow_line1"
android:scaleType="matrix"
android:src="@drawable/scrollbar" />
<!--制作主體部分viewpager-->
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/shadow_line1">
</android.support.v4.view.ViewPager>
</RelativeLayout>
其中文字顏色我設置成了自建樣式，具體代碼可在本文末的《5.2.更新修復》中看到（點此跳轉）。
另外，ImageView里面用到的圖片：@drawable/scrollbar，這個是我隨便截了一個矩形圖片然后Ctrl+C -> Ctrl+V進來的
3. 然后制作兩個分頁
“全部”標簽對應的分頁：page_item_all.xml
“新增”標簽對應的分頁：page_item_new.xml
在左分頁當中，我們要加載一個卡片列表，所以采用RecyclerView布局。
左分頁page_item_all.xml代碼如下：
<android.support.v7.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3e3e3e">
</android.support.v7.widget.RecyclerView>
在右分頁當中，我們要制作表單填寫的功能，這些內容會在下章講，所以現在先留空。
右分頁page_item_new.xml代碼如下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#8e8e8e">
</LinearLayout>完成了兩個分頁的制作，接下來開始處理滑動邏輯，下面開始是本章的重點內容。
4. MainActivity代碼
在MainActivity.java中，我們主要思考以下要做的事情：
- 加載主界面
- 點擊可切換分頁
- 滑動可切換分頁
- 細節處理：
- 點擊文字變色
- 分頁切換時指示器（緊挨着標簽文字下方的小橫條）也要跟着移動
所以在代碼中我們也是緊緊圍繞以上幾點做文章：
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ViewPager viewPager;
private ArrayList<View> pageList;
private TextView titleAll; //標題文字“全部”
private TextView titleNew; //標題文字“新增”
private ImageView indicator; //滾動指示器
private int offset = 0; //滾動條初始偏移量
private int currIndex = 0; //當前頁編號
private int bmpW; //滾動條寬度
private int one; //一倍滾動量
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//開始綁定按鈕
viewPager = (ViewPager) findViewById(R.id.viewPager);
titleAll = (TextView) findViewById(R.id.title_all);
titleNew = (TextView) findViewById(R.id.title_new);
indicator = (ImageView) findViewById(R.id.indicator);
//用LayoutInflater來綁定布局
LayoutInflater inflater = getLayoutInflater();
View view1 = inflater.inflate(R.layout.page_item_all, null);//先預加載這兩個頁布局
View view2 = inflater.inflate(R.layout.page_item_new, null);
pageList = new ArrayList<View>();//pageList被實例化為裝載View元素的數組
pageList.add(view1);
pageList.add(view2);
//add的先后順序不要搞錯，先add的就是array[0]位置的元素了
//初始化分頁適配器功能
PagerAdapter pagerAdapter = new PagerAdapter() {
//參考：https://www.cnblogs.com/weixing/archive/2013/10/11/3363951.html
//獲取頁卡總數量
@Override
public int getCount() {
return pageList.size();
}
//判斷是否由對象生成界面，這個很重要，是用來把pageView數組中的page1和page2生成到當前布局中的方法
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
//使從ViewGroup中移出當前View
@Override
public void destroyItem(ViewGroup arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView(pageList.get(arg1));
}
//返回一個對象，這個對象表明了PagerAdapter適配器選擇哪個對象放在當前的ViewPager中
@Override
public Object instantiateItem(ViewGroup arg0, int arg1) {
//這個方法用來實例化頁卡
((ViewPager) arg0).addView(pageList.get(arg1));
return pageList.get(arg1);
}
};
//綁定適配器
viewPager.setAdapter(pagerAdapter);
//設置viewPager的初始界面為第一個頁面
viewPager.setCurrentItem(0); //這里的0對應的是pageList[0]，也就是page1了
//添加切換界面的監聽器
viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
//監聽文字被點擊
titleAll.setOnClickListener(this);
titleNew.setOnClickListener(this);
//初始化指示器的各項參數
InitScrollbar(bmpW);
}
public void InitScrollbar(int bmpW) {
// 獲取滾動條指示器的寬度
bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.scrollbar).getWidth();
//為了獲取屏幕寬度，新建一個DisplayMetrics對象
DisplayMetrics displayMetrics = new DisplayMetrics();
//將當前窗口的一些信息放在DisplayMetrics類中
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
//從而得到屏幕的寬度
int screenW = displayMetrics.widthPixels;
//初始化滾動條的位置
offset = screenW / 2 - bmpW - 34;
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
indicator.setImageMatrix(matrix);
//計算出切換一個界面時，滾動條的位移量
one = bmpW + 74;
}
//這里是文字被點擊時的邏輯
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.title_all:
//當點擊“全部”標簽時，調用左分頁的加載
viewPager.setCurrentItem(0);
break;
case R.id.title_new:
//當點擊“新增”標簽時，調用右分頁的加載
viewPager.setCurrentItem(1);
break;
}
}
//頁面滾動監聽器功能，實現標簽頁左右滑動切換效果
public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageSelected(int index) {
Animation animation = null;
switch (index) {
case 0:
titleAll.setTextColor(0xff000000);//0x表示整型，ff表示透明度為0，最后的6位數字表示顏色，必須這樣寫，不能省略
titleNew.setTextColor(0xff8e8e8e);
//該情況下，指示器從右向左移動
animation = new TranslateAnimation(one, 0, 0, 0);
//以上四個參數分別代表開始點離x坐標差值，結束點離x坐標差值；開始點離y坐標差值，結束點離y坐標差值
break;
case 1:
titleNew.setTextColor(0xff000000);
titleAll.setTextColor(0xff8e8e8e);
//該情況下，指示器從左向右移動
animation = new TranslateAnimation(0, one, 0, 0);
break;
}
currIndex = index;//使當前頁編號等於該值，0表示“全部”頁，1表示“新增”頁
animation.setFillAfter(true);//將此值設置為true表示指示器將停止在最終移動到的位置上
//動畫持續時間，單位為毫秒
animation.setDuration(200);
//開始執行動畫
indicator.startAnimation(animation);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
}
}
如果你不喜歡代碼中某些變量的命名，可以使用shift+f6批量修改。（詳見：http://blog.csdn.net/Likianta/article/details/78612532）
完成后運行，看看效果是否符合預期（當時忘記截圖了，下面這張圖是包含了下章內容的截圖，舊圖中分頁本該顯示的是兩種純色背景）。
5. 其他功能更新
5.1. 軟鍵盤按Enter鍵觸發登錄按鈕
上章制作的登錄界面，大家在使用的時候會覺得每次點“進入”之前要先關閉軟鍵盤應該很麻煩，所以在LoginActivity.java中新增一個檢測軟鍵盤“Enter”鍵的功能：
public class LoginActivity extends AppCompatActivity {
...
//監聽軟鍵盤輸入，當輸入Enter的時候，也能觸發上面的登錄按鈕
etPassword.setOnKeyListener(new View.OnKeyListener() {
@Override
public boolean onKey(View view, int i, KeyEvent keyEvent) {
if (i == keyEvent.KEYCODE_ENTER) {
loginOn.callOnClick(); //callOnClick是performClick的簡化版，適合簡單觸發點擊監聽事件
}
return false;
/**關於返回值的說明
* 以煮面來舉例，返回值為true，表示“這塊面交給我了，系統你不要再過問此事”。比如鍵盤輸入“1”，讓它發出鳥叫聲。則編輯框中不會出現數字1，因為系統不去管這個鍵了
* 返回值為false，則表示“我過來給這塊面加點調料，完了系統你繼續煮”。比如鍵盤輸入“1”，不僅能發出鳥叫聲，編輯框中也會出現數字1，因為系統要按自己的步伐去執行
* 更多解析見此回答：https://zhidao.baidu.com/question/1430105248859125459.html
*/
}
});
...
}5.2. 將顏色設置為通用的色卡並放到colors.xml文件中
（返回原位置）
界面中經常會重復用到幾種固定的顏色，可以將其定義到res/values/colors.xml文件中：
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<!--自制色卡-->
<color name="mycolorLineShadow">#868686</color>
<color name="mycolorText1">#000000</color>
<color name="mycolorText2">#8e8e8e</color>
<color name="mycolorPurple">#6000c0</color>
<color name="mycolorPurpleInactive">#8668a5</color>
<color name="mycolorBackground">#dedede</color>
</resources>使用方法：
<TextView
android:textColor="@color/mycolorText1"
...>
</TextView>相關參考
- Android實現界面左右滑動切換 - Black__Lotus的博客 - CSDN博客 http://m.blog.csdn.net/black__lotus/article/details/50805389?yyue=a21bo.50862.201879
- Aandroid在ViewPager中添加ListView_zero零零 http://blog.sina.cn/dpool/blog/s/blog_95bc05000101bhxe.html
- https://zhidao.baidu.com/question/1430105248859125459.html
日志
2017年11月17日
1. 【創建】主頁面
2. 【修改】解決線條位置的錯誤
2017年11月20日
1. 【新增】主頁面的左右滑動效果
2. 【修改】將顏色設置為通用的色卡並放到colors.xml文件中
3. 【修改】軟鍵盤按Enter鍵觸發登錄按鈕
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。