02 Anykey左右滑動布局ViewPager


目錄

1. 先看一下最終的效果圖

layout_main標題欄效果圖

如圖所示,標題欄有兩個文字標簽和一個指示器,點擊可以左右切換,下面空白的地方裝載分頁,滑動可以左右切換。這是本章要做出來的功能。

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中,我們主要思考以下要做的事情:

  1. 加載主界面
  2. 點擊可切換分頁
  3. 滑動可切換分頁
  4. 細節處理:
    1. 點擊文字變色
    2. 分頁切換時指示器(緊挨着標簽文字下方的小橫條)也要跟着移動

所以在代碼中我們也是緊緊圍繞以上幾點做文章:

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

完成后運行,看看效果是否符合預期(當時忘記截圖了,下面這張圖是包含了下章內容的截圖,舊圖中分頁本該顯示的是兩種純色背景)。
page1
page2


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>

相關參考

  1. Android實現界面左右滑動切換 - Black__Lotus的博客 - CSDN博客 http://m.blog.csdn.net/black__lotus/article/details/50805389?yyue=a21bo.50862.201879
  2. Aandroid在ViewPager中添加ListView_zero零零 http://blog.sina.cn/dpool/blog/s/blog_95bc05000101bhxe.html
  3. https://zhidao.baidu.com/question/1430105248859125459.html

日志

2017年11月17日
1. 【創建】主頁面
2. 【修改】解決線條位置的錯誤

2017年11月20日
1. 【新增】主頁面的左右滑動效果
2. 【修改】將顏色設置為通用的色卡並放到colors.xml文件中
3. 【修改】軟鍵盤按Enter鍵觸發登錄按鈕


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com