美文网首页
卡片布局

卡片布局

作者: C_G__ | 来源:发表于2019-04-28 16:36 被阅读0次

CardView 卡片布局

展示效果如同将内容放在卡片中一样,提供圆角,投影等。
build.gradle中添加依赖

implementation 'com.android.support:cardview-v7:28.0.0'

AppBarLayout

加强版的垂直LinearLayout,内部做了很多滚动事件相关的封装。

SwipeRefreshLayout 下拉刷新

support-v4中提供

示例代码


build.gradle

implementation 'com.android.support:cardview-v7:28.0.0'

Fruit.java

public class Fruit {

    private String name;
    private int imageId;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public Fruit(String name, int imageId) {
        this.name = name;
        this.imageId = imageId;
    }

}

FruitAdapter.java

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

    private Context mContext;
    private List<Fruit> mFruitList;

    static class ViewHolder extends RecyclerView.ViewHolder {

        CardView cardView;
        ImageView fruitImage;
        TextView fruitName;

        public ViewHolder(View view) {
            super(view);
            cardView = (CardView)view;
            fruitImage = ((CardView) view).findViewById(R.id.fi_iv_fruit_image);
            fruitName = ((CardView) view).findViewById(R.id.fi_tv_fruit_name);
        }
    }

    public FruitAdapter(List<Fruit> fruitList) {
        mFruitList = fruitList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        if (mContext == null) {
            mContext = viewGroup.getContext();
        }
        View view = LayoutInflater.from(mContext)
                .inflate(R.layout.fruit_item, viewGroup, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
        Fruit fruit = mFruitList.get(i);
        viewHolder.fruitName.setText(fruit.getName());
        Glide.with(mContext).load(fruit.getImageId()).into(viewHolder.fruitImage);
    }

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


activity_card_view.xml

<android.support.v4.widget.DrawerLayout 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=".chapter12.CardViewActivity">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/cv_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_scrollFlags="scroll|enterAlways|snap"/>
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/cv_refresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <android.support.v7.widget.RecyclerView
                android:id="@+id/cv_rv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        </android.support.v4.widget.SwipeRefreshLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/cv_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@mipmap/ic_launcher" />
    </android.support.design.widget.CoordinatorLayout>

</android.support.v4.widget.DrawerLayout>

CardViewActivity.java

public class CardViewActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private SwipeRefreshLayout mSwipeRefreshLayout;

    private Fruit[] fruits = {new Fruit("Apple", R.drawable.apple)
            , new Fruit("Banana", R.drawable.banana)
            , new Fruit("Apple", R.drawable.apple)
            , new Fruit("Banana", R.drawable.banana)
            , new Fruit("Apple", R.drawable.apple)
            , new Fruit("Banana", R.drawable.banana)
            , new Fruit("Apple", R.drawable.apple)
            , new Fruit("Banana", R.drawable.banana)};

    private List<Fruit> fruitList = new ArrayList<>();

    private FruitAdapter adapter;

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

        // 数据源制作
        initFruits();
        RecyclerView recyclerView = findViewById(R.id.cv_rv);
        // 栅格布局
        GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
        adapter = new FruitAdapter(fruitList);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(adapter);

        // 下拉刷新
        mSwipeRefreshLayout = findViewById(R.id.cv_refresh);
        mSwipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);
        mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refreshFruits();
            }
        });
    }

    /**
     * 模拟刷新请求数据
      */
    private void refreshFruits() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(2000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        initFruits();
                        adapter.notifyDataSetChanged();
                        mSwipeRefreshLayout.setRefreshing(false);
                    }
                });
            }
        }).start();
    }

    /**
     * 初始化数据源
     */
    private void initFruits() {
        fruitList.clear();
        for (int i=0; i<50; i++) {
            Random random = new Random();
            int index = random.nextInt(fruits.length);
            fruitList.add(fruits[index]);
        }
    }
}

相关文章

  • 布局

    单栏布局两栏布局三栏布局风景列表卡片

  • 卡片布局

    CardView 卡片布局 展示效果如同将内容放在卡片中一样,提供圆角,投影等。build.gradle中添加依赖...

  • FlutterApp首页实现

    首页实现总结 目录 根布局 Banner图 AppBar 卡片布局 根布局 根布局使用Scaffold,这个是ma...

  • collectionView卡片流水布局

    卡片式流水布局可以 ##自定义布局-继承UICollectionViewFlowLayout ###重写prepa...

  • 仿探探层叠布局

    技术点 1.在不触摸屏幕的情况下,卡片呈现层叠布局。 2.拖拽时,下层的布局随最上层卡片的位置放大或缩小 层叠布局...

  • Flutter Card卡片布局

    Card卡片布局 main.dart代码: 【效果】如下:

  • 卡片布局UICollectionViewFlowLayout

  • 卡片组件布局

    Flutter还有一种比较比较酷炫的布局方式,我称 它为卡片式布局。这种布局类似ViewList,但是列表会以物理...

  • CardView卡片布局

    1、首先我们需要导入依赖 2、再来看看CardView的基本使用 在RecyclerView的使用中我们需要为it...

  • html 卡片布局

    css html

网友评论

      本文标题:卡片布局

      本文链接:https://www.haomeiwen.com/subject/wdqjnqtx.html