碼農日常-『Android studio』RecyclerView自動捲動與控制捲動速度 @ 碼農日常大小事

本篇又要來寫RecyclerViewΣ(゜゜)

對～本站關於RecyclerView的文章真der寫得超級多...這篇是第7回了XD

碼農日常-『Android studio』基本RecyclerView用法

碼農日常-『Android studio』基本RecyclerView 用法-2 基本版下拉更新以及點擊事件

碼農日常-『Android studio』基本RecyclerView 用法-3 RecyclerView上下滑動排序與側滑刪除(RecyclerView Swipe)

碼農日常-『Android studio』基本RecyclerView 用法-4 左滑顯示Button Menu

碼農日常-『Android studio』進階RecyclerView 用法-5 RecyclerView item混合介面

碼農日常-『Android studio』嵌套式RecyclerView(Nested RecyclerView)實現

那今天，我要來寫關於RecyclerView自動捲動這一回事

不知道各位有沒有遇過？就是RecyclerView有上千筆資料，或是一筆資料很寬，沒幾筆資料就導致ReyclcerView很長一串的情形？

對，這時候就有兩種作法

第一是緩加載，也就是一頁限制幾筆資料，等滑到了再去加載那部份的資料

而第二種就是今天寫的，~~設置電梯向下~~設置自動捲動的功能

那麼，就來看一下今天的功能吧

Emmmm...看來Gif的畫質跟不上捲動速度，Okay..反正知道有功能就好

本篇沒有Github，需要程式的留言給我跟我拿嘿

1. 看一下專案結構&介面

首先，因為本篇未提供Github，所以不免俗地要來看一下今天到底寫了些什麼

截圖 2021-05-15 下午12.02.06

基礎設置為RecyclerView系列相關文件，像是item.xml這個檔案以及MyAdapter.java這個檔案，我就不再另行介紹

不過該給的Code還是會給！！(」°ﾛ°)｣

咳咳，總之先給一下介面...

activity_main.xml

截圖 2021-05-15 下午12.39.25

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView_Display"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/button_Down"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_Up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="UP"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button_Down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="DOWN"
        app:layout_constraintBottom_toBottomOf="@+id/button_Up"
        app:layout_constraintEnd_toStartOf="@+id/button_Up" />
</androidx.constraintlayout.widget.ConstraintLayout>

item.xml

截圖 2021-05-15 下午12.40.27

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content">

    <androidx.cardview.widget.CardView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:foregroundGravity="center"
        app:cardElevation="7dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textView_Item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="50dp"
            android:text="TextView"
            android:textAppearance="@style/TextAppearance.AppCompat.Large"
            android:textStyle="bold" />
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

2. 設置基本RecyclerView

好啦，接下來設置RecyclerView

我原先是很想講不懂的就去看我以前的文章

->碼農日常-『Android studio』基本RecyclerView用法

不過我從當時過來也算是有點長進了(-‿◦)

所以可以的話，就看一看我這篇寫的Code吧～

咳咳，總之先來設置RecyclerView搭配的Adapter吧(･ω･)b

MyAdapter.java

class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {


    private ArrayList<String> arrayList;

    public MyAdapter(ArrayList<String> arrayList) {
        this.arrayList = arrayList;
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {
        TextView tvItem;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            tvItem = itemView.findViewById(R.id.textView_Item);
        }
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        holder.tvItem.setText(arrayList.get(position));
    }

    @Override
    public int getItemCount() {
        return arrayList.size();
    }
}

這邊也不是什麼太難的東西，我就不再另行解釋～

3. 設置滾動

好的，接著回到MainActivity.java

我們先把功能寫出來吧

ublic class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ArrayList<String> data = makeData();
        RecyclerView recyclerView = findViewById(R.id.recyclerView_Display);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        MyAdapter myAdapter = new MyAdapter(data);
        recyclerView.setAdapter(myAdapter);

    }
    /**製作1000筆資料*/
    private ArrayList<String> makeData(){
        ArrayList<String> arrayList = new ArrayList<>();

        for (int i = 0; i <1000 ; i++) {
            arrayList.add((i+1)+"號物件");
        }
        return arrayList;
    }
}

到這邊執行，就可以先看到Recyclerview正確呈現。

再來是設置自動滾動事件

這功能非常、非常簡單

只要加一行以下標注粉底白字的內容即可

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ArrayList<String> data = makeData();
        RecyclerView recyclerView = findViewById(R.id.recyclerView_Display);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        MyAdapter myAdapter = new MyAdapter(data);
        recyclerView.setAdapter(myAdapter);


        Button btUp,btDown;
        btUp = findViewById(R.id.button_Up);
        btDown = findViewById(R.id.button_Down);
        btUp.setOnClickListener(v -> {
            recyclerView.smoothScrollToPosition(0);
        });
        btDown.setOnClickListener(v -> {
            recyclerView.smoothScrollToPosition(data.size()-1);
        });

    }
    /**製作1000筆資料*/
    private ArrayList<String> makeData(){
        ArrayList<String> arrayList = new ArrayList<>();

        for (int i = 0; i <1000 ; i++) {
            arrayList.add((i+1)+"號物件");
        }
        return arrayList;
    }
}

這時候來執行看看吧

恩...是有功能啦...不過捲動得好像有點慢

4. 改寫滾動速度

恩，我是覺得滾動得有點慢啦！

根據我錄製影片的速度來看

13秒才能捲到底...(1000筆資料)

OMG..(〇o〇；)

所以我後來研究了一下，總算是知道了要如何調整滾動的速度

其故中奧妙在於setLayoutManager內

一般我是使用LinearLayoutManager

不過這次我們稍微改一下LinearLayoutManager

首先請先開一個檔案，並繼承LinearLayoutManager

class AutoScroll extends LinearLayoutManager {

然後是建構子

private float MILLISECONDS_PER_INCH = 1f;//控制下滑速度

public AutoScroll(Context context) {
    super(context);
}

public AutoScroll(Context context, int orientation, boolean reverseLayout,int count) {
    super(context, orientation, reverseLayout);
    if (count<100){
        this.MILLISECONDS_PER_INCH = 5f;
    }else if(count<500){
        this.MILLISECONDS_PER_INCH = 3f;
    }else{
        this.MILLISECONDS_PER_INCH = 1f;
    }
}

public AutoScroll(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
}

請注意，這個count是我自己加的，為了是要根據資料數來判斷滾動速度

再來...恩...直接輸入以下內容吧XDDDDDD

class AutoScroll extends LinearLayoutManager {
    private float MILLISECONDS_PER_INCH = 1f;//控制下滑速度

    public AutoScroll(Context context) {
        super(context);
    }

    public AutoScroll(Context context, int orientation, boolean reverseLayout,int count) {
        super(context, orientation, reverseLayout);
        if (count<100){
            this.MILLISECONDS_PER_INCH = 5f;
        }else if(count<500){
            this.MILLISECONDS_PER_INCH = 3f;
        }else{
            this.MILLISECONDS_PER_INCH = 1f;
        }
    }

    public AutoScroll(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override/**這邊開始就是以下內容XD*/
    public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
        final LinearSmoothScroller linearSmoothScroller = new LinearSmoothScroller(recyclerView.getContext()){
            @Nullable
            @Override
            public PointF computeScrollVectorForPosition(int targetPosition) {
                return super.computeScrollVectorForPosition(targetPosition);
            }

            @Override
            protected float calculateSpeedPerPixel(DisplayMetrics displayMetrics) {
                return MILLISECONDS_PER_INCH / displayMetrics.densityDpi;
            }
        };
        linearSmoothScroller.setTargetPosition(position);
        startSmoothScroll(linearSmoothScroller);
    }
}

模組完成後，最後使用它！

MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ArrayList<String> data = makeData();
        RecyclerView recyclerView = findViewById(R.id.recyclerView_Display);
        recyclerView.setLayoutManager(new AutoScroll(this, AutoScroll.VERTICAL, false, data.size()));
        MyAdapter myAdapter = new MyAdapter(data);
        recyclerView.setAdapter(myAdapter);


        Button btUp,btDown;
        btUp = findViewById(R.id.button_Up);
        btDown = findViewById(R.id.button_Down);
        btUp.setOnClickListener(v -> {
            recyclerView.smoothScrollToPosition(0);
        });
        btDown.setOnClickListener(v -> {
            recyclerView.smoothScrollToPosition(data.size()-1);
        });

    }
    /**製作1000筆資料*/
    private ArrayList<String> makeData(){
        ArrayList<String> arrayList = new ArrayList<>();

        for (int i = 0; i <1000 ; i++) {
            arrayList.add((i+1)+"號物件");
        }
        return arrayList;
    }
}

好的，到此執行，就可以看見想到的結果囉＾＾

今早看疫情，今天(5/15)居然增加了180

真是嚇死偶了QQ

所以原先打算下午出去打球的...Emmm還是算了XD

總之啦，祝大家都身體健康，不要染疫

台灣會走出來的，加油！

順便告訴大家一個防疫最好的辦法～

窩在家裡打Code就對了！！！XDDDDDD

筆記程式設計 Android Studio Java Andoird androidapp開發 androidstudio教學 Android studio arraylist RecyclerView arraylistjava android RecyclerView recyclerview Auto Scroll 捲動速度 smooth smoothScrollToPosition RecyclerView自動捲動

碼農日常

碼農日常大小事

碼農日常發表在痞客邦留言(20) 人氣()

E-mail轉寄

«	四月 2024					»
日	一	二	三	四	五	六
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

碼農日常大小事

認真打好每一篇文章，認真分享程序猿每一件大小事；走過晃過依然滿載而歸

Hello