此UI中的任何帮助对我都有好处。
答案 0 :(得分:1)
正如我在上面的评论中所提到的:“这是通过使用A RecyclerView,使用GridLayoutManager,FloatingActionButton,CoordinatorLayout,AppBarLayout和工具栏来实现的。”这与Plaid应用程序的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;
}
}
}
祝你好运,快乐的编码!
答案 1 :(得分:1)