2011-05-16 139 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; 
} 
} 

這個代碼或許對你有所幫助。