2011-05-16 171 views
0

我对Android布局设计还是比较陌生。我需要小小的帮助来设计一个看起来像这样的动态加载图像/文本的布局。请咨询如何做到这一点。Android布局帮助

enter image description here

回答

1

这是所有关于从Web服务器检索数据。 寻找LazyList适配器实现(谷歌搜索会引导你在Stackoverflow)。这是加载图像。 还研究REST通信。

Good tutorial for XML parsing on Android

当你与这个工作 - 提出更具体的问题。

0

我会使用一个GridLayout膨胀自定义视图,包括标题和图像你想要的。您可以随时进入充气视图以动态更改其内容(文本或图像)。

我找到了​​网站,说明你如何将它们与适配器一起使用。

+0

请提供示例代码,所以它会更清晰 – nakashu 2016-02-09 23:37:02

+0

刚刚编辑。 @nakashu – Samuel 2016-02-15 17:11:02

0

您可以在RecyclerView中使用GridLayoutManager来实现此设计,并且您可以从Web服务器加载图像。在客户端,您尝试使用GlidePicasso来显示和缓存图像。 list_item.xml

<android.support.v7.widget.CardView 
xmlns:card_view="http://schemas.android.com/apk/res-auto" 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/card_view" 
android:layout_width="80dp" 
android:layout_height="wrap_content" 
card_view:cardUseCompatPadding="true" 
card_view:cardCornerRadius="8dp" 
android:layout_marginBottom="16dp"> 

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/country_photo" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:contentDescription="@string/action_settings" 
     android:src="@drawable/three" 
     android:scaleType="centerCrop" /> 

    <TextView 
     android:id="@+id/country_name" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:textSize="13sp" 
     android:text="@string/country_name" 
     android:textColor="@color/accent_color" 
     android:gravity="center" 
     android:layout_below="@+id/country_photo" 
     android:paddingBottom="8dp" 
     android:paddingTop="8dp" 
     android:layout_alignParentBottom="true" 
     android:background="@color/color_primary_dark"/> 

</RelativeLayout> 

RecyclerViewAdapter

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewHolders> { 

private List<ItemObject> itemList; 
private Context context; 

public RecyclerViewAdapter(Context context, List<ItemObject> itemList) { 
    this.itemList = itemList; 
    this.context = context; 
} 

@Override 
public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) { 

    View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.card_view_list, null); 
    RecyclerViewHolders rcv = new RecyclerViewHolders(layoutView); 
    return rcv; 
} 

@Override 
public void onBindViewHolder(RecyclerViewHolders holder, int position) { 
    holder.countryName.setText(itemList.get(position).getName()); 
    holder.countryPhoto.setImageResource(itemList.get(position).getPhoto()); 
} 

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

RecyclerViewHolders

public class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener{ 

public TextView countryName; 
public ImageView countryPhoto; 

public RecyclerViewHolders(View itemView) { 
    super(itemView); 
    itemView.setOnClickListener(this); 
    countryName = (TextView)itemView.findViewById(R.id.country_name); 
    countryPhoto = (ImageView)itemView.findViewById(R.id.country_photo); 
} 

@Override 
public void onClick(View view) { 
    Toast.makeText(view.getContext(), "Clicked Country Position = " + getPosition(), Toast.LENGTH_SHORT).show(); 
} 
} 

MainActivity

public class MainActivity extends ActionBarActivity { 
private GridLayoutManager lLayout; 

@Override 
    protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
    setTitle(null); 

    Toolbar topToolBar = (Toolbar)findViewById(R.id.toolbar); 
    setSupportActionBar(topToolBar); 
    topToolBar.setLogo(R.drawable.logo); 
    topToolBar.setLogoDescription(getResources().getString(R.string.logo_desc)); 

    List<ItemObject> rowListItem = getAllItemList(); 
    lLayout = new GridLayoutManager(MainActivity.this, 4); 

    RecyclerView rView = (RecyclerView)findViewById(R.id.recycler_view); 
    rView.setHasFixedSize(true); 
    rView.setLayoutManager(lLayout); 

    RecyclerViewAdapter rcAdapter = new RecyclerViewAdapter(MainActivity.this, rowListItem); 
    rView.setAdapter(rcAdapter); 
} 

@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; 
    } 
    if(id == R.id.action_refresh){ 
     Toast.makeText(MainActivity.this, "Refresh App", Toast.LENGTH_LONG).show(); 
    } 
    if(id == R.id.action_new){ 
     Toast.makeText(MainActivity.this, "Create Text", Toast.LENGTH_LONG).show(); 
    } 

    return super.onOptionsItemSelected(item); 
    } 

    private List<ItemObject> getAllItemList(){ 

    List<ItemObject> allItems = new ArrayList<ItemObject>(); 
    allItems.add(new ItemObject("United States", R.drawable.one)); 
    allItems.add(new ItemObject("Canada", R.drawable.two)); 
    allItems.add(new ItemObject("United Kingdom", R.drawable.three)); 
    allItems.add(new ItemObject("Germany", R.drawable.four)); 
    allItems.add(new ItemObject("Sweden", R.drawable.five)); 
    allItems.add(new ItemObject("United Kingdom", R.drawable.six)); 
    allItems.add(new ItemObject("Germany", R.drawable.seven)); 
    allItems.add(new ItemObject("Sweden", R.drawable.eight)); 
    allItems.add(new ItemObject("United States", R.drawable.one)); 
    allItems.add(new ItemObject("Canada", R.drawable.two)); 
    allItems.add(new ItemObject("United Kingdom", R.drawable.three)); 
    allItems.add(new ItemObject("Germany", R.drawable.four)); 
    allItems.add(new ItemObject("Sweden", R.drawable.five)); 
    allItems.add(new ItemObject("United Kingdom", R.drawable.six)); 
    allItems.add(new ItemObject("Germany", R.drawable.seven)); 
    allItems.add(new ItemObject("Sweden", R.drawable.eight)); 

    return allItems; 
} 
} 

这个代码或许对你有所帮助。