材料設計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，我用它來創建一個程序

希望這可以幫助你，任何疑問只是說:)