溫馨提示×

您好,登錄后才能下訂單哦!

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

Android中如何仿制淘寶滾動(dòng)圖文條

發(fā)布時(shí)間:2021-05-11 16:34:14 來源:億速云 閱讀:132 作者:Leah 欄目:移動(dòng)開發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)Android中如何仿制淘寶滾動(dòng)圖文條,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。

Android是什么

Android是一種基于Linux內(nèi)核的自由及開放源代碼的操作系統(tǒng),主要使用于移動(dòng)設(shè)備,如智能手機(jī)和平板電腦,由美國(guó)Google公司和開放手機(jī)聯(lián)盟領(lǐng)導(dǎo)及開發(fā)。

思路

  1. 寫一個(gè)不可用手滑動(dòng)的RecyclerView

  2. 使用Handler定時(shí)RecyclerView自動(dòng)滑動(dòng)到下一個(gè)Item

  3. 使用smoothScrollToPosition使其平滑地滑動(dòng)

開始工作

做一些基本工作

寫一個(gè)AdModel類。

public class AdModel {

  public String title;
  public String content;

  public AdModel(String title, String content) {
    this.title = title;
    this.content = content;
  }
}

寫一些item_ad布局。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/layout"
  android:layout_width="match_parent"
  android:layout_height="50dp"
  android:minHeight="50dp"
  android:gravity="center_vertical"
  android:orientation="horizontal"
  android:background="@null"
  tools:background="@color/black">

  <LinearLayout
    android:id="@+id/ll_ad"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:orientation="vertical">

    <TextView
      android:id="@+id/tv_title"
      tools:text="會(huì)員身份0元搶"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:ellipsize="end"
      android:lines="1"
      android:textColor="@color/white"
      android:textSize="12sp" />

    <TextView
      android:id="@+id/tv_content"
      tools:text="送你體驗(yàn)會(huì)員"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:ellipsize="end"
      android:lines="1"
      android:textColor="@color/white"
      android:textSize="10sp" />

  </LinearLayout>

  <View
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_weight="1"/>

  <ImageView
    android:id="@+id/iv_icon"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_marginRight="15dp"
    android:src="@drawable/icon"/>

</LinearLayout>

寫AdAdapter類。

public class AdAdapter extends RecyclerView.Adapter<AdAdapter.ViewHolder> {

  private Context mContext;
  private OnItemClickListener onItemClickListener;
  private LayoutInflater mInflater;
  private List<AdModel> mDataList;

  public AdAdapter(Context context, List<AdModel> datas) {
    this.mContext = context;
    mDataList = datas;
    mInflater = LayoutInflater.from(context);
  }

  @Override
  public ViewHolder onCreateViewHolder(final ViewGroup parent, int viewType) {
    View itemView = mInflater.inflate(R.layout.item_ad, null);
    return new ViewHolder(itemView);
  }

  @Override
  public void onBindViewHolder(ViewHolder holder, final int p) {
    if (mDataList == null || mDataList.size() ==0){
      return;
    }
    if (holder != null) {
      final int position = p % mDataList.size();

      holder.mTvTitle.setText(mDataList.get(position).title);
      holder.mTvContent.setText(mDataList.get(position).content);
      holder.mIvIcon.setImageResource(R.drawable.icon);

      holder.viewRoot.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
          if (onItemClickListener != null) {
            onItemClickListener.onItemClick(v, position);
          }
        }
      });
    }
  }

  public void setOnItemClickListener(OnItemClickListener clickListener) {
    this.onItemClickListener = clickListener;
  }

  @Override
  public int getItemCount() {
    return mDataList == null ? 0 : Integer.MAX_VALUE;
  }

  public class ViewHolder extends RecyclerView.ViewHolder {

    public View viewRoot;
    public TextView mTvTitle;
    public TextView mTvContent;
    public ImageView mIvIcon;

    public ViewHolder(View itemView) {
      super(itemView);
      viewRoot = itemView.findViewById(R.id.layout);
      mTvTitle = itemView.findViewById(R.id.tv_title);
      mTvContent = itemView.findViewById(R.id.tv_content);
      mIvIcon = itemView.findViewById(R.id.iv_icon);
    }
  }

  /**
   * RecyclerView的item點(diǎn)擊監(jiān)聽接口
   */
  public interface OnItemClickListener {
    void onItemClick(View v, int position);
  }

}

頁面activity_main布局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
  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.cc.scrolladbar.MainActivity">

  <android.support.v7.widget.RecyclerView
    android:id="@+id/rv_ad"
    android:layout_width="0dp"
    android:layout_height="50dp"
    android:layout_marginEnd="20dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="60dp"
    android:nestedScrollingEnabled="false"
    android:background="@color/black"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

重點(diǎn)代碼

在MainActivity中寫如下代碼。

package com.cc.scrolladbar;

import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.LinearSmoothScroller;
import android.support.v7.widget.RecyclerView;
import android.util.DisplayMetrics;
import android.view.View;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by guoshichao on 2018/8/16
 * QQ:1169380200
 */

public class MainActivity extends AppCompatActivity {

  private static final int SCROLL_AD = 0;//會(huì)員輪播廣告
  public static final int DEFAULT_SCROLL_INTERVAL = 3000;//會(huì)員輪播廣告間隔時(shí)間
  public static final int DEFAULT_SCROLL_ANIMATION_TIME = 500;//會(huì)員輪播廣告動(dòng)畫時(shí)長(zhǎng)

  private RecyclerView mRvAd;
  private AdAdapter mAdapter;
  private List<AdModel> mAdList;
  private AdHandler mHandler;
  private int nowScrollPosition = 0;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    initList();
  }

  @Override
  public void onStart() {
    super.onStart();
    scrollVipAdOnce(nowScrollPosition);//防止滑動(dòng)一半切到別的頁面使滑動(dòng)完成
    if (mHandler != null) {
      sendScrollMessage(DEFAULT_SCROLL_INTERVAL);
    }
  }

  @Override
  public void onStop() {
    super.onStop();
    if (mHandler != null) {
      mHandler.removeMessages(SCROLL_AD);
    }
  }

  private void initList() {
    mAdList = new ArrayList<>();
    mAdList.add(new AdModel("第一條廣告標(biāo)題", "我是第一條廣告的內(nèi)容哦~"));
    mAdList.add(new AdModel("第二條廣告標(biāo)題", "我是第二條廣告的內(nèi)容哦~"));
    mAdList.add(new AdModel("第三條廣告標(biāo)題", "我是第三條廣告的內(nèi)容哦~"));

    LinearLayoutManager manager = new LinearLayoutManager(this) {
      @Override
      public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
        LinearSmoothScroller smoothScroller = new LinearSmoothScroller(recyclerView.getContext()) {
          // 為了平滑滑動(dòng)返回:滑過1px時(shí)經(jīng)歷的時(shí)間(ms)。
          @Override
          protected float calculateSpeedPerPixel(DisplayMetrics displayMetrics) {
            return (float) (DEFAULT_SCROLL_ANIMATION_TIME / displayMetrics.densityDpi);
          }
        };
        smoothScroller.setTargetPosition(position);
        startSmoothScroll(smoothScroller);
      }
    };

    mRvAd = (RecyclerView) findViewById(R.id.rv_ad);
    mRvAd.setLayoutManager(manager);
    mAdapter = new AdAdapter(this, mAdList);
    mRvAd.setAdapter(mAdapter);
    mAdapter.setOnItemClickListener(new AdAdapter.OnItemClickListener() {
      @Override
      public void onItemClick(View v, int position) {
        //點(diǎn)擊跳轉(zhuǎn)到指定廣告頁
      }
    });
    mHandler = new AdHandler();
    sendScrollMessage(DEFAULT_SCROLL_INTERVAL);
  }

  private void scrollVipAdOnce(int position) {
    if (mAdList != null && mAdList.size() > 1) {
      //平滑滑動(dòng)到指定位置
      mRvAd.smoothScrollToPosition(position);
    }
  }

  private void sendScrollMessage(long delayMillis) {
    mHandler.removeMessages(SCROLL_AD);
    mHandler.sendEmptyMessageDelayed(SCROLL_AD, delayMillis);
  }

  private class AdHandler extends Handler {

    @Override
    public void handleMessage(Message msg) {
      super.handleMessage(msg);

      switch (msg.what) {
        case SCROLL_AD:
          nowScrollPosition++;
          scrollVipAdOnce(nowScrollPosition);
          sendScrollMessage(DEFAULT_SCROLL_INTERVAL);
          break;
        default:
          break;
      }
    }
  }

}

重點(diǎn)分析

其中有一段代碼比較重要。

LinearLayoutManager manager = new LinearLayoutManager(this) {
      @Override
      public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
        LinearSmoothScroller smoothScroller = new LinearSmoothScroller(recyclerView.getContext()) {
          // 為了平滑滑動(dòng)返回:滑過1px時(shí)經(jīng)歷的時(shí)間(ms)。
          @Override
          protected float calculateSpeedPerPixel(DisplayMetrics displayMetrics) {
            return (float) (DEFAULT_SCROLL_ANIMATION_TIME / displayMetrics.densityDpi);
          }
        };
        smoothScroller.setTargetPosition(position);
        startSmoothScroll(smoothScroller);
      }
    };

上述就是小編為大家分享的Android中如何仿制淘寶滾動(dòng)圖文條了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。

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

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

AI