溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么在Android中利用GridView實現(xiàn)一個水平滾動功能

發(fā)布時間：2020-12-04 16:50:39 來源：億速云 閱讀：291 作者：Leah 欄目：移動開發(fā)

怎么在Android中利用GridView實現(xiàn)一個水平滾動功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

Android為我們提供了豎直方向的滾動控件GridView，但如果我們想讓它水平滾動起來，就需要自己實現(xiàn)了。

以下使用的測試數(shù)據(jù)datas集合都為List<ResolveInfo>類型，用來存儲手機(jī)中的所有App

  public static List<ResolveInfo> getAppData(Context context) {
    PackageManager packageManager = context.getPackageManager();
    Intent mainIntent = new Intent(Intent.ACTION_MAIN, null);
    mainIntent.addCategory(Intent.CATEGORY_LAUNCHER);
    return packageManager.queryIntentActivities(mainIntent, 0);
  }

一、單行橫向顯示

怎么在Android中利用GridView實現(xiàn)一個水平滾動功能

實現(xiàn)思路

  1. 在代碼中動態(tài)設(shè)置GridView的NumColumns，使其等于GridView要顯示的數(shù)據(jù)集合大小。
  2. 動態(tài)設(shè)置item項寬度，結(jié)合數(shù)據(jù)集合大小來設(shè)置GridView的總寬度。
  3. 使用HorizontalScrollView包裹GridView
     

具體實現(xiàn)

關(guān)鍵代碼

  /**
   * 將GridView改成單行橫向布局
   */
  private void changeGridView() {
    // item寬度
    int itemWidth = DensityUtil.dip2px(this, 100);
    // item之間的間隔
    int itemPaddingH = DensityUtil.dip2px(this, 1);
    int size = datas.size();
    // 計算GridView寬度
    int gridviewWidth = size * (itemWidth + itemPaddingH);

    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
        gridviewWidth, LinearLayout.LayoutParams.MATCH_PARENT);
    mContentGv.setLayoutParams(params);
    mContentGv.setColumnWidth(itemWidth);
    mContentGv.setHorizontalSpacing(itemPaddingH);
    mContentGv.setStretchMode(GridView.NO_STRETCH);
    mContentGv.setNumColumns(size);
  }

這里用到的dip2px方法是根據(jù)手機(jī)的分辨率從 dp 的單位 轉(zhuǎn)成為 px(像素)

  /**
   * 根據(jù)手機(jī)的分辨率從 dp 的單位 轉(zhuǎn)成為 px(像素)
   * @param context  上下文
   * @param dpValue  dp值
   * @return px值
   */
  public static int dip2px(Context context, float dpValue) {
    final float scale = context.getResources().getDisplayMetrics().density;
    return (int) (dpValue * scale + 0.5f);
  }

在布局文件中，使用HorizontalScrollView包裹GridView

  <HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbars="none">
    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <GridView
        android:id="@+id/gv_horizontal_gridview_line"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"/>
    </LinearLayout>
  </HorizontalScrollView>

通過以上設(shè)置，再加上Adapter適配器就能實現(xiàn)單行橫向滾動了，適配器使用常規(guī)的實現(xiàn)方式就行，這里就不貼了

二、多行橫向分頁顯示

怎么在Android中利用GridView實現(xiàn)一個水平滾動功能

實現(xiàn)思路

  1. 使用ViewPager實現(xiàn)左右翻頁效果。
  2. 根據(jù)數(shù)據(jù)集合大小，計算出要顯示的頁數(shù)，并生成相應(yīng)數(shù)量的GridView。
  3. 在GridView的Adapter適配器中，動態(tài)分配GridView需要顯示的數(shù)據(jù)集合。
  4. 使用List保存多個GridView實例并傳入ViewPager適配器中，一頁ViewPager對應(yīng)一個GridView實例。

具體實現(xiàn)

數(shù)據(jù)量很多時，需要進(jìn)行分頁，計算方式

需要頁數(shù) = 總數(shù)量 ÷ 每頁顯示數(shù)量

有些整除不了的，就需要使用Math.ceil()函數(shù)，向上取整

關(guān)鍵代碼

  /**
   * 獲取系統(tǒng)所有的應(yīng)用程序，根據(jù)每頁需要顯示的item數(shù)量，生成相應(yīng)數(shù)量的GridView頁面
   */
  private void initViews(List<ResolveInfo> datas) {
    int dataSize = datas.size();

    // （需要頁數(shù) = 總數(shù)量 ÷ 每頁顯示數(shù)量）向上取整數(shù)
    int PageCount = (int) Math.ceil(dataSize / APP_SIZE);
    mGridViewList = new ArrayList<>();
    for (int i = 0; i <= PageCount; i++) {
      GridView appPage = new GridView(this);
      appPage.setAdapter(new HorizontalGvAdapter(this, datas, i));
      appPage.setNumColumns(4);
      appPage.setVerticalSpacing(1);
      appPage.setHorizontalSpacing(1);
      appPage.setHorizontalScrollBarEnabled(false);
      appPage.setVerticalScrollBarEnabled(false);
      mGridViewList.add(appPage);
    }

    if(dataSize % APP_SIZE == 0){
      mGridViewList.remove(mGridViewList.size()-1);
      PageCount--;
    }

    mGvPagerAdapter = new HorizontalGvPagerAdapter(mGridViewList);
    viewPager.setAdapter(mGvPagerAdapter);
    viewPager.addOnPageChangeListener(new MyPageChangeListener());

    addDot(PageCount);
  }

當(dāng)總數(shù)量 ÷ 每頁顯示數(shù)量剛好被整除時，會出現(xiàn)一頁空白頁的情況，這個時候需要去掉多出來的那一頁

    if(dataSize % APP_SIZE == 0){
      mGridViewList.remove(mGridViewList.size()-1);
      PageCount--;
    }

Adapter在創(chuàng)建初期就要對顯示的數(shù)據(jù)進(jìn)行控制，因為這里每個GridView都有一個單獨的Adapter，所以需要對其顯示的datas進(jìn)行動態(tài)計算

通過傳入構(gòu)造方法的數(shù)據(jù)進(jìn)行動態(tài)計算，可以得出數(shù)據(jù)開始加載的位置、結(jié)束加載的位置

HorizontalGvAdapter的構(gòu)造方法：

  /**
   * 所有應(yīng)用數(shù)據(jù)
   */
  private List<ResolveInfo> mAppDatas = new ArrayList<ResolveInfo>();

  public HorizontalGvAdapter(Context context, List<ResolveInfo> list, int page) {
    this.mContext = context;

    // 開始加載的位置
    int pageStart = page * HorizontalGridViewAct.APP_SIZE;
    // 結(jié)束加載的位置
    int pageEnd = pageStart + HorizontalGridViewAct.APP_SIZE;

    while ((pageStart < list.size()) && (pageStart < pageEnd)) {
      mAppDatas.add(list.get(pageStart));
      pageStart++;
    }
  }

如果需要加小圓點的話，可以先在布局中用一個空LinearLayout當(dāng)小圓點的容器

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="#ffffff"
       android:orientation="vertical">
  <android.support.v4.view.ViewPager
    android:id="@+id/vp_horizontal_gridview"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_gravity="center"
    android:background="#c5c5c5"
    android:scaleType="fitXY"/>

  <!-- 底部小圓點 -->
  <LinearLayout
    android:id="@+id/ll_dot_container"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="#4b4b4b"
    android:layout_gravity="bottom"
    android:gravity="center"
    android:orientation="horizontal"/>
</LinearLayout>

然后在代碼中用List<View>來保存創(chuàng)建的小圓點

  // 放圓點的list
  private List<View> dotViewsList;

  /**
   * 創(chuàng)建指定數(shù)量的圓點
   * @param dotNumber viewPager的數(shù)量
   */
  private void addDot(int dotNumber) {
    if (null == dotViewsList) {
      dotViewsList = new ArrayList<View>();
    }
    LinearLayout dotLayout = (LinearLayout) findViewById(R.id.ll_dot_container);
    for (int i = 0; i <= dotNumber; i++) {
      ImageView dotView = new ImageView(this);
      LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
          FrameLayout.LayoutParams.WRAP_CONTENT,
          FrameLayout.LayoutParams.WRAP_CONTENT);

      // 圓點與圓點之間的距離
      params.leftMargin = 10;
      params.rightMargin = 10;

      // 圓點的大小
      params.height = 15;
      params.width = 15;

      dotLayout.addView(dotView, params);
      dotViewsList.add(dotView);
    }
    // 設(shè)置圓點默認(rèn)選中第一個
    setDotShow(0);
  }
動態(tài)添加完小圓點后，就可以設(shè)置它們的選中狀態(tài)了，這里只需要更改對應(yīng)小圓點的圖片顯示就行

  /**
   * 顯示底部圓點導(dǎo)航
   * @param position 選中哪個圓點
   */
  private void setDotShow(int position){
    if (dotViewsList == null){
      return;
    }
    for (int i = 0; i < dotViewsList.size(); i++) {
      if (i == position) {
        dotViewsList.get(position).setBackgroundResource(R.drawable.ic_dot_on);
      } else {
        dotViewsList.get(i).setBackgroundResource(R.drawable.ic_dot_off);
      }
    }
  }

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手