材料设计RecyclerView布局

Question

如何归档为我RecyclerView的布局，看起来像这样：

我曾尝试创建它，但它没有以往任何时候都像在giudlines。

这是从材质设计指导中获得的，但我找不到任何xml布局，除了Sketch和/或PSDs。 在XML中有没有任何资源directl？

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

编辑2：我知道如何使用&实现RecyclerView

Answer 1

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

Answer 2

创建一个你想要的内部的.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); 

这只是我的exemples，我用它来创建一个程序

希望这可以帮助你，任何疑问只是说:)