材料设计RecyclerView布局

时间:2016-05-10 16:53:34

标签: android xml layout material-design

如何存档我的RecyclerView布局,如下所示: enter image description here

我尝试过创建它,但它确实看起来像是在giudlines中。

这是从Material Design Guidlines中获取的,但除了Sketch和/或PSD之外,我找不到任何xml布局。 在xml中有任何直接的资源吗?

编辑1:我只需要单个列表项XML布局

编辑2:我知道如何使用&实施RecyclerView

2 个答案:

答案 0 :(得分:0)

请参阅此官方文档链接,了解如何使用RecyclerView.LayoutManager http://developer.android.com/training/material/lists-cards.html

答案 1 :(得分:0)

示例

中创建一个包含所需内容的.xml
    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/gradient_bg"
    android:orientation="horizontal"
    android:layout_margin="1dp"
    android:padding="1dip" >

    <LinearLayout android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="17dip"
        android:layout_alignParentLeft="true"        
        android:layout_marginRight="2dip">
        <ImageView
            android:id="@+id/gasImagem"
            android:contentDescription="cover"
            android:layout_width="100dip"
            android:layout_height="100dip"
            /> 
    </LinearLayout>

    <TextView
        android:id="@+id/gasTitulo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/thumbnail"
        android:layout_toRightOf="@+id/thumbnail"
        android:textColor="#040404"
        android:layout_marginTop="30dp"
        android:typeface="sans"
        android:textSize="20sp"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/gasPreco"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="#000000"
        android:textStyle="bold"
        android:layout_marginTop="95dp"
        android:layout_toRightOf="@+id/thumbnail"/>
    <Button
        android:id="@+id/btCarro"
        android:layout_width="50dp"
        android:layout_height="30dp"
        android:background = "@drawable/roundedbutton"
        android:layout_marginTop="95dp"
        android:layout_marginLeft="310dp"
        android:drawableTop="@drawable/shoppingcart"
        android:textAlignment="center"
        />
</RelativeLayout>

After this create an adapter  **example**

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

    private List<Produto>gasList;
    private LayoutInflater layout;


    public MyAdaptadorRecycler(Context c,List<Produto>l){
        gasList = l;
        layout = (LayoutInflater)c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = layout.inflate(R.layout.list_row,parent,false);
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }



    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.ivcapa.setImageResource(gasList.get(position).getImagem());
        holder.tvtitulo.setText(gasList.get(position).getNome());
        holder.tvPreco.setText(String.valueOf(gasList.get(position).getPreco()) + "€");
        final int posicao = position;
        holder.bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(v.getContext(), "Carrinho: ", Toast.LENGTH_SHORT).show();
            }
        });

        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(view.getContext(), "Recycle Click", Toast.LENGTH_SHORT).show();
            }
        });

    }

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


    public static class ViewHolder extends RecyclerView.ViewHolder {
        protected TextView tvtitulo, tvPreco;
        protected ImageView ivcapa;
        protected Button bt;

        public ViewHolder(View itemView) {
            super(itemView);
            this.tvtitulo = (TextView) itemView.findViewById(R.id.gasTitulo);
            this.ivcapa = (ImageView) itemView.findViewById(R.id.gasImagem);
            this.tvPreco = (TextView)itemView.findViewById(R.id.gasPreco);
            this.bt = (Button)itemView.findViewById(R.id.btCarro);
        }


    }


}

也许你需要一个分隔符例如:

    public class DividerItemDecoration extends RecyclerView.ItemDecoration {
    private final int mVerticalSpaceHeight;

    public DividerItemDecoration(int mVerticalSpaceHeight) {
        this.mVerticalSpaceHeight = mVerticalSpaceHeight;
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
                               RecyclerView.State state) {
        outRect.bottom = mVerticalSpaceHeight;
        //outRect.left = mVerticalSpaceHeight;
        //outRect.right = mVerticalSpaceHeight;
    }
}


then in your mainActivity you **need to do this:** 



        LinearLayoutManager llm = new LinearLayoutManager(this);
        this.rv.setLayoutManager(llm);
        rv.addItemDecoration(new DividerItemDecoration(20));
        rv.setHasFixedSize(true);
        nr= 1;
        this.listaPordutos = new ArrayList<Produto>();
        this.adapatadorLivros = new MyAdaptadorRecycler(this, listaPordutos);
        rv.setAdapter(this.adapatadorLivros);

这只是我用来创建程序的例子

希望这可以帮到你,任何疑问只会说:)