我如何製作此用戶界面？

Question

在這個用戶界面的任何幫助將對我有利。

Answer 1

Plaid是一款開源的展示應用程序，由Nick Butcher從Google的Android團隊創建。

源代碼可用here和該特定屏幕的佈局文件可用here。

Answer 2

正如我在上面的評論中提到的：「這是通過使用A RecyclerView，通過使用GridLayoutManager，FloatingActionButton，CoordinatorLayout，AppBarLayout和工具欄實現的。」這與T格式應用不匹配，但它具有相同的底層佈局概念。

這裏是一個快速樣品activity_main：

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 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" 
    android:fitsSystemWindows="true" 
    tools:context="com.divshark.griddemo.MainActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      app:popupTheme="@style/AppTheme.PopupOverlay" /> 

    </android.support.design.widget.AppBarLayout> 


    <android.support.v7.widget.RecyclerView 
     android:id="@+id/recycler_view" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="bottom|end" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@android:drawable/ic_dialog_email" /> 

</android.support.design.widget.CoordinatorLayout> 

row_holder.xml：

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" android:layout_width="match_parent" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_height="wrap_content"> 

    <ImageView 
     android:id="@+id/iv_grid_item" 
     android:scaleType="centerCrop" 
     tools:src="@drawable/sample" 
     android:layout_width="match_parent" 
     android:layout_height="144dp" /> 

    <android.support.v7.widget.AppCompatTextView 
     android:id="@+id/tv_item" 
     android:layout_gravity="bottom" 
     android:background="#77000000" 
     tools:text="Item One" 
     android:textColor="@android:color/white" 
     android:paddingLeft="8dp" 
     android:textSize="24sp" 
     android:gravity="center_vertical" 
     android:layout_width="match_parent" 
     android:layout_height="56dp" /> 

</FrameLayout> 

MainActivity.java：

public class MainActivity extends AppCompatActivity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(toolbar); 

     RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view); 
     recyclerView.setLayoutManager(new GridLayoutManager(this, 2)); 
     List<Item> mItems = getItems(); 
     recyclerView.setAdapter(new DemoAdapter(mItems)); 

     FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); 
     fab.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 
       Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG) 
         .setAction("Action", null).show(); 
      } 
     }); 
    } 

    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
     // Inflate the menu; this adds items to the action bar if it is present. 
     getMenuInflater().inflate(R.menu.menu_main, menu); 
     return true; 
    } 

    @Override 
    public boolean onOptionsItemSelected(MenuItem item) { 
     // Handle action bar item clicks here. The action bar will 
     // automatically handle clicks on the Home/Up button, so long 
     // as you specify a parent activity in AndroidManifest.xml. 
     int id = item.getItemId(); 

     //noinspection SimplifiableIfStatement 
     if (id == R.id.action_settings) { 
      return true; 
     } 

     return super.onOptionsItemSelected(item); 
    } 

    public List<Item> getItems(){ 
     List<Item> items = new ArrayList<>(16); 
     for(int i = 0; i < 16; i ++){ 
      items.add(new Item("Item "+ i, R.drawable.sample)); 
     } 

     return items; 
    } 


    public class DemoAdapter extends RecyclerView.Adapter<DemoAdapter.RowHolder>{ 
     List<Item>items; 

     public DemoAdapter(List<Item>items){ 
      this.items = items; 
     } 

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

     @Override 
     public RowHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
      View view = getLayoutInflater().inflate(R.layout.row_holder, parent, false); 
      return new RowHolder(view); 
     } 

     @Override 
     public void onBindViewHolder(RowHolder holder, int position) { 

      Item item = items.get(position); 
      holder.mImageView.setImageResource(item.imageResource); 
      holder.mTextView.setText(item.text); 
     } 

     class RowHolder extends RecyclerView.ViewHolder{ 

      ImageView mImageView; 
      AppCompatTextView mTextView; 

      public RowHolder(View itemView) { 
       super(itemView); 

       mImageView = (ImageView) itemView.findViewById(R.id.iv_grid_item); 
       mTextView = (AppCompatTextView) itemView.findViewById(R.id.tv_item); 
      } 
     } 
    } 

    public class Item { 
     public String text; 
     public int imageResource; 
     public Item(String text, int imageResource){ 
      this.text = text; 
      this.imageResource = imageResource; 
     } 
    } 
} 

祝你好運和快樂編碼！