一對一直播系統原始碼，Flexbox+ReclyclerView實現流式佈局

一對一直播系統原始碼，Flexbox+ReclyclerView實現流式佈局實現的相關程式碼

佈局

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_Flexbox"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

MainActivity

package com.example.myapplication;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import com.google.android.flexbox.FlexDirection;
import com.google.android.flexbox.FlexWrap;
import com.google.android.flexbox.FlexboxLayoutManager;
import com.google.android.flexbox.JustifyContent;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
    private RecyclerView rv_Flexbox;
    private List<String> list_data;
    private FlexBoxAdapter fAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rv_Flexbox = (RecyclerView)findViewById(R.id.rv_Flexbox);
        FlexboxLayoutManager flexboxLayoutManager = new FlexboxLayoutManager(this);
        //flexDirection 屬性決定主軸的方向（即專案的排列方向）。類似 LinearLayout 的 vertical 和 horizontal。
        flexboxLayoutManager.setFlexDirection(FlexDirection.ROW);//主軸為水平方向，起點在左端。
        //flexWrap 預設情況下 Flex 跟 LinearLayout 一樣，都是不帶換行排列的，但是flexWrap屬性可以支援換行排列。
//        flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);//按正常方向換行
        //justifyContent 屬性定義了專案在主軸上的對齊方式。
//        flexboxLayoutManager.setJustifyContent(JustifyContent.FLEX_START);//交叉軸的起點對齊。
        rv_Flexbox.setLayoutManager(flexboxLayoutManager);
        list_data = new ArrayList<>();
        list_data.add("小米手機");
        list_data.add("平衡車");
        list_data.add("無人機");
        list_data.add("神舟膝上型電腦");
        list_data.add("小鵬汽車");
        list_data.add("特斯拉");
        fAdapter = new FlexBoxAdapter(this,list_data);
//        fAdapter.notifyDataSetChanged();
        rv_Flexbox.setAdapter(fAdapter);
        fAdapter.setOnItemClickLitener(new FlexBoxAdapter.OnItemClickLitener() {
            @Override
            public void OnItemClick(View view, int positon) {
                Log.e("wy", "position: "+positon+"  data:" + list_data.get(positon));
            }
        });
    }
}

FlexBoxAdapter

package com.example.myapplication;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
public class FlexBoxAdapter extends RecyclerView.Adapter<FlexBoxAdapter.myHolder> {
    private Context mContext;
    private List<String> list_data;
    private LayoutInflater inflater;
    public FlexBoxAdapter(Context mContext, List<String> list_data) {
        this.mContext = mContext;
        this.list_data = list_data;
        this.inflater = LayoutInflater.from(mContext);
    }
    @NonNull
    @Override
    public myHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = inflater.inflate(R.layout.fragment_rv_item,viewGroup,false);
        return new myHolder(view);
    }
    @Override
    public void onBindViewHolder(@NonNull final myHolder myHolder, int i) {
        myHolder.tv_title.setText(list_data.get(i));
        // 如果設定了回撥，則設定點選事件
        if (mOnItemClickLitener != null)
        {
            myHolder.itemView.setOnClickListener(new View.OnClickListener()
            {
                @Override
                public void onClick(View v)
                {
                    int pos = myHolder.getLayoutPosition();
                    mOnItemClickLitener.OnItemClick(myHolder.itemView, pos);
                }
            });
        }
    }
    @Override
    public int getItemCount() {
        return list_data.size();
    }
    class myHolder extends RecyclerView.ViewHolder
    {
        TextView tv_title;
        public myHolder(@NonNull View itemView) {
            super(itemView);
            tv_title = (TextView)itemView.findViewById(R.id.tv_title);
        }
    }
    /**
     * 定義點選每項的介面
     */
    public interface OnItemClickLitener
    {
        void OnItemClick(View view, int positon);
    }
    private OnItemClickLitener mOnItemClickLitener;
    public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener)
    {
        this.mOnItemClickLitener = mOnItemClickLitener;
    }
}

drawable下

flex_item_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=" android:shape="rectangle">
    <!-- 填充-->
    <solid android:color="#00000000"/>
    <!-- 描邊 -->
    <stroke
        android:width="1dp"
        android:color="#7F7F7F" />
    <!-- 圓角 -->
    <corners
        android:radius="2dp" />
</shape>

以上就是 一對一直播系統原始碼，Flexbox+ReclyclerView實現流式佈局實現的相關程式碼，更多內容歡迎關注之後的文章