ITdaan
中文简体   相关内容

02 Anykey左右滑動布局ViewPager

本文转载自  likianta  查看原文  2017-11-23  932    view/ 分页/ viewpager/ 滑动/ key           

目錄

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鍵觸發登錄按鈕


注意！

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



ViewPager禁止左右滑動 禁止ViewPager左右滑動 ViewPager禁用左右滑動 禁止ViewPager左右滑動 Viewpager禁止左右滑動 左右循環滑動的viewpager android viewpager禁止左右滑動 android - ViewPager 監聽左右滑動 Android禁止ViewPager左右滑動 android viewpager左右滑動的Demo
 
粤ICP备14056181号  © 2014-2021 ITdaan.com