Android實戰開發之引導頁面

文章目錄

Android實戰開發之引導頁面
前言
一、概述
二、操作步驟
- 1.操作準備
- 2.初始化
- 3、配接器設定
- 3、圓點的滑動事件
- 4、通過ApI獲取圖片資源并設定
- 5、創建彈窗用于IP地址和埠號的保存與修改
三、總結

前言

本篇文章主要介紹了引導頁面的設計與制作，引導頁面的方法有很多種，我們采用ViewPager來實作，圖片資源本篇文章從服務器獲取的，當然如果沒有服務器，也可以使用參考的資源圖片，

引導頁效果圖

提示：本篇文章不過多講解Android的一些基礎知識，只講解實作程序與思路，后續將會通過鏈接的方式去陸續補充完整，敬請期待……

一、概述

使用ViewPager來實作引導頁面的滑動效果
ViewPager的實作需要配接器（Adapter）和資料源（List<View>）
Adapter的作用是將資料源與ViewPager進行適配調節

注：List<view>是用于“打包多個”View(即視圖，或者說布局)，而每一個View又承載了一個圖片控制元件用于圖片的顯示，

二、操作步驟

1.操作準備

新建包兩個包activity和adapter用于檔案分類
在activity和layout目錄下分別創建檔案activity_guide.xml和GuideActivity.java檔案
在activity_guide.xml布局中添加ViewPager控制元件用來實作布局切換，添加三個View控制元件作為圓點顯示引導頁面位置
在adapter下新建檔案ViewPagerAdapter.java
在layout下新建三個檔案layout_guide01.xml、layout_guide02.xml、layout_guide03.xml三個布局檔案并分別添加三個ImageView控制元件用于展示圖片
在drawable檔案目錄下創建view_true.xml和view_false檔案并使用shape繪畫出兩個不同顏色的圓，用于標識選中和未選中狀態（也可以使用selector選擇器這里不做講解）

2.初始化

在GuideActivity.java中初始化控制元件、布局、資料
我們使用三張圖片來作為引導頁面，所以需要初始化三個布局、三個圓點、
三個圖片（布局、圓點和圖片的數量一定是統一的），
這里我們將布局、圖片和圓點控制元件用陣列來宣告，同時固定按順序來宣告一個int型別標識id的陣列，

    //布局
    private View[] views;
    private final int[] viewsId = {
            R.layout.layout_guide01,
            R.layout.layout_guide02,
            R.layout.layout_guide03
    };
    //圖片
    private ImageView[] imageViews;
    private final int[] imageViewsId = {
            R.id.imageView,
            R.id.imageView2,
            R.id.imageView3
    };
    //圓點
    private View[] circleViews;
    private final int[] circleViewsId = {
            R.id.view,
            R.id.view2,
            R.id.view3
    };

控制元件的初始化時，我們可以使用遍歷陣列的方式進行回圈初始化（從下標為0開始
遍歷，小于頁面（圖片）控制元件陣列的長度—>取決于對應Id（layout）陣列的長
度，這樣寫的最大好處在于更改時只需要對Id(layout)陣列進行修改，便于維護）

        layoutInflater = getLayoutInflater();
         listView = new ArrayList<>();
        viewpager = findViewById(R.id.viewPager);

		views = new View[viewsId.length];
        circleViews = new View[circleViewsId.length];
        imageViews = new ImageView[imageViewsId.length];
        for(int i = 0;i<3;i++){
            //布局初始化
            views[i] = layoutInflater.inflate(viewsId[i],null,false);
            //圓點初始化
            circleViews[i] = findViewById(circleViewsId[i]);
            //布局對應控制元件初始化
            imageViews[i] = views[i].findViewById(imageViewsId[i]);
            //創建視圖集
            listView.add(views[i]);
        }

注：這里我們使用LayoutInferlater.inferlater方法（傳入layout和null引數即可）動態加載布局，也就是初始化，使用前需要實體化LayoutInferlate物件，實體化List呼叫add方法傳入View引數來初始化資料

3、配接器設定

繼承自PagerAdapter并實作四個基本方法

 public class ViewPagerAdapter extends PagerAdapter {
    //回傳串列中視圖數量
    @Override
    public int getCount() {
        return listView.size();
    }


    //為翻頁控制元件添加視圖
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {

        container.addView(listView.get(position));

        return listView.get(position);
    }

    //移除翻頁控制元件的視圖
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(listView.get(position));

    }

    //判斷視圖是否屬于物件
    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == object;
    }
}

添加構造器，指定List<View>引數，用于實體化時傳遞List<View>資料

 //添加構造器
public ViewPagerAdapter(List<View> viewList){
    this.listView = viewList;
}

實體化ViewPagerAdapter，呼叫寫好的Adapter構造器傳入初始化好的List
資料源，呼叫ViewPager的setAdapter方法將ViewPagerAdapter放入

//給配接器添加布局集
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(listView);
//給viewpager添加配接器
viewpager.setAdapter(viewPagerAdapter);

3、圓點的滑動事件

這里我們呼叫ViewPager的滑動監聽方法addOnPageChangeListener并重寫onpageScrolled方法（需要實作三個基本方法其他兩個不做過多講解）,其中position引數表示位置int型別，positionOffset引數表示位置偏移量float型別，positionOffsetPixels引數表示像素位置偏移量int型別，這里我們只需要position引數，

viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @SuppressLint("UseCompatLoadingForDrawables")
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        for(int i  = 0;i<views.length;i++){
            if(position == i){
                circleViews[i].setBackground(getDrawable(R.drawable.circle_background_true));
            }else{
                circleViews[i].setBackground(getDrawable(R.drawable.circle_background_false));
            }
        }

    }
    @Override
    public void onPageSelected(int position) {
        
    }
    @Override
    public void onPageScrollStateChanged(int state) {
        
    }
});

注：當處于第一張引導頁面的時候，此時position的值為0，圓點的狀態為選中狀態，反之如果不是第一張頁面，position的值不為0且圓點為未選中狀態，我們使用 if else來進行判斷，我們有三個引導頁面（即三個圓點），因此我們需要重復三次操作，我們利用for回圈來執行（回圈3次），設定圓點選中和未選中我們呼叫的是setBackground方法引數為Drawable,因此我么需要呼叫getDrawable方法然后傳入int型別的資源（即R.drawable.XXXX,來參考資源）

4、通過ApI獲取圖片資源并設定

首先創建子執行緒（網路請求是耗時任務需要在子執行緒中執行）獲取圖片的Json資料，我們呼叫封裝好的requestGet方法請求json資料

Thread thread = new Thread(new Runnable() {
        @Override
           public void run() {
            //獲取引導頁面json資料
            JSONArray jsonArray = null;
            String uri = null;
            bitmaps = new Bitmap[imageViews.length];
            String address = "http://124.93.196.67:8080";
            String inface = "/prod-api/api/rotation/list?pageNum=1&pageSize=3";
            String json = RequestUtil.requestGet(address+inface);
        });
        thread.start();

圖片API介面

API介面

然后決議json資料獲取到rows對應的以json為元素的陣列，將其強制轉換為JSONArray物件，然后通過JSONArray的get方法傳入陣列下標來讀取對應的圖片json資料，然后再次決議json物件獲取到advImg對應的值，將這個值拼接到服務器地址即可獲得圖片的地址，再通過這個url呼叫寫好的getImageBitmap方法將url地址轉換為Bitmap物件

   //獲取我們需要的rows
    JSONObject jsonObject = new JSONObject(json);
    JSONArray jsonArray = (JSONArray) jsonObject.opt("rows");
    for(int i = 0;i<jsonArray.length();i++){
         String advImg = jsonArray.get(i).toString();
         JSONObject jsonObject1 = new JSONObject(advImg);
         uri = jsonObject1.opt("advImg").toString();
         String url = address + uri;
         bitmaps[i] = RequestUtil.getImageBitmap(url);
     }

最后切換到主執行緒呼叫Image的setImageBitmap方法設定圖片

               //切換到主執行緒設定圖片
              runOnUiThread(new Runnable() {
                  @Override
                  public void run() {

                      for(int i =0;i<imageViews.length;i++){
                          imageViews[i].setImageBitmap(bitmaps[i]);
                      }

                  }
              });

注：關于JSONArray物件資料的讀取，和Bitmap位圖的設定同樣采用陣列遍歷的方法，這里的網路請求封裝和通過url獲取圖片的Bitmap不做講解，

5、創建彈窗用于IP地址和埠號的保存與修改

自定義彈窗的建立需要先自定義一個彈窗的布局檔案alertdialog.xml
首先我們需要實體化AlertDialog.Builder物件并傳入背景關系Context
呼叫LayoutInflater.inflater方法動態加載布局，再AlertDialog.Builder物件的setView、setTitl等方法來引入布局和基本設定，最后分別呼叫AlertDialog.Builder物件的create和show方法來創建展示彈窗，最終初始化控制元件就可以對控制元件進行設定

//創建彈窗
        AlertDialog.Builder builder = new AlertDialog.Builder(GuideActivity.this);
        View alertDialogView = layoutInflater.inflate(R.layout.alertdialog,null);
        builder.setView(alertDialogView).setTitle("網路設定");
        builder.create();
        Dialog dialog = builder.show();
        //初始化控制元件
       EditText ipEt =  alertDialogView.findViewById(R.id.editTextTextPersonName2);
       EditText portEt = alertDialogView.findViewById(R.id.editTextTextPersonName3);
       Button saveBt = alertDialogView.findViewById(R.id.button5);
       Button cancelBt = alertDialogView.findViewById(R.id.button6);

   //修改IP地址和埠號
    cancelBt.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View view) {
               dialog.dismiss();
               Toast.makeText(GuideActivity.this,"修改成功！",Toast.LENGTH_SHORT).show();
           }
       });

    //保存網路設定
    saveBt.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            //保存IP和埠號
           String ip = ipEt.getText().toString().trim();
           String port = portEt.getText().toString().trim();
           sharedPreferences02 = getSharedPreferences("socket",MODE_PRIVATE);
           SharedPreferences.Editor editor = sharedPreferences02.edit();
           editor.putString("ip",ip);
           editor.putString("port",port);
           editor.apply();
           //關閉彈窗
            dialog.dismiss();
           //提示資訊
           Toast.makeText(GuideActivity.this,"保存成功！",Toast.LENGTH_SHORT).show();
        }
    });

注：保存和修改IP和埠號的方法一樣（Shared Preferences資料覆寫機制），SharedPreferences的使用需要宣告SharedPreferences和SharedPreferences.Editor物件并分別呼叫getSharedPregerences方法傳入String型別的name和MODE_PRIVATE和SharedPreferences.edit方法，最后呼叫SharedPereferences.Editor的putSting方法以鍵值對形式存盤資料，最終呼叫Shared Preferences.Editor的apply方法提交保存（commit方法也可，但在一些情況下會出現問題，不建議使用）

三、總結

以上便是引導頁面的設計與制作，猿友們可以根據實際需求和實際情況隨機應變，有什么問題歡迎留言，一起學習進步哦~

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/401680.html

標籤：其他

上一篇：移動應用開發課設

下一篇：【Groovy】Groovy 方法呼叫 ( 使用物件名.@成員名訪問 Groovy 物件成員 )

Android實戰開發——引導頁面（VeiwPager）篇