創建ViewGroup的ImageView和TextView，並以編程方式在FlowLayout中顯示它 - Android

Question

我有一個Flow佈局，顯示行的4個對象，但我需要顯示這些4個對象，每個對象下面都有一個textview。但它顯示2圖像和2 textview，並junp到另一行。我嘗試創建一個ViewGroup以將它們一起顯示，但我得到了相同的結論。也許如果我嘗試設置組內的textView的位置它運河工作，但我不知道如何做到這一點。

什麼我：

我想要什麼：

我的XML：

<ScrollView 
    android:id="@+id/svLikes" 
    android:layout_width="0dp" 
    android:layout_height="0dp" 
    android:layout_marginBottom="60dp" 
    android:layout_marginEnd="14dp" 
    android:layout_marginStart="14dp" 
    android:layout_marginTop="48dp" 
    android:background="#3c4052" 
    android:orientation="vertical" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="@+id/btnAdd" 
    app:layout_constraintVertical_bias="0.0" 
    tools:layout_constraintBottom_creator="1" 
    tools:layout_constraintLeft_creator="1" 
    tools:layout_constraintRight_creator="1" 
    tools:layout_constraintTop_creator="1"> 

    <com.nex3z.flowlayout.FlowLayout 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:paddingTop="5dp" 
     android:paddingRight="5dp" 
     app:childSpacingForLastRow="align" 
     android:paddingLeft="5dp" 
     app:rowSpacing="8dp" 
     android:id="@+id/likesContainer" 
     > 

    </com.nex3z.flowlayout.FlowLayout> 

</ScrollView> 

我的代碼：

ImageView iconLike = new ImageView(Register30.this); 
      TextView txtLike = new TextView(Register30.this); 

      iconLike.setImageDrawable(getDrawable(R.drawable.x)); 
      txtLike.setText("Unable"); 


      countLikesAdd++; 
      removeMessageOrShow(); 


      LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(140,130); 
      lp.setMargins(5,5,5,5); 
      iconLike.setLayoutParams(lp); 
      txtLike.setLayoutParams(lp); 
      txtLike.setTextColor(Color.parseColor("#FFFFFF")); 
      fieldLike.setText(""); 
      ViewGroup gp = new LinearLayout(Register30.this); 
      gp.addView(iconLike); 
      gp.addView(txtLike); 
      likesContainer.addView(gp); 

Answer 1

第一種方法：靜態的方式 我想你需要的是在一個TextView的繪製的圖像。可繪製的圖像可插入除中心外的任何位置。從asset studio創建所需尺寸的合適圖像，並在TextView上使用此行。

機器人：drawableTop = 「@繪製/ ic_fb_logo_blue_48dp」

一個簡單的實現是用下面的代碼。

<android.support.v4.widget.NestedScrollView 
       android:id="@+id/svLikes" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:layout_marginBottom="60dp" 
       android:layout_marginEnd="14dp" 
       android:layout_marginStart="14dp" 
       android:layout_marginTop="48dp" 
       android:orientation="vertical"> 

       <com.nex3z.flowlayout.FlowLayout 
        android:id="@+id/likesContainer" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:paddingLeft="5dp" 
        android:paddingRight="5dp" 
        android:paddingTop="5dp" 
        app:childSpacingForLastRow="align" 
        app:rowSpacing="8dp"> 

        <TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:drawableTop="@drawable/ic_fb_logo_blue_48dp" 
         android:gravity="center" 
         android:text="@string/facebook" 
         android:textSize="16sp" /> 

        <TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:drawableTop="@drawable/ic_fb_logo_blue_48dp" 
         android:gravity="center" 
         android:text="@string/facebook" 
         android:textSize="16sp" /> 

        <TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:drawableTop="@drawable/ic_fb_logo_blue_48dp" 
         android:gravity="center" 
         android:text="@string/facebook" 
         android:textSize="16sp" /> 

        <TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:drawableTop="@drawable/ic_fb_logo_blue_48dp" 
         android:gravity="center" 
         android:text="@string/facebook" 
         android:textSize="16sp" /> 

       </com.nex3z.flowlayout.FlowLayout> 

      </android.support.v4.widget.NestedScrollView> 

輸出圖像如下。我用NestedScrollView而不是ScrollView。

第二種方法：動態 編程可以通過使用網格佈局來產生的若干意見。我實行使用recylerview低於

內活動類：

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

    recyclerOne = (RecyclerView) findViewById(R.id.recyclerView); 

    initRecyclerView(); 

    //update whenever necessary 
    adapterOne.updateItems(myList); 
} 

private void initRecyclerView(){ 
    //Datum is model class 
    int spanCount = 4; // 4 columns in grid 
    int spacing = 8; 
    boolean includeEdge = true; 

    GridLayoutManager gridLayoutManager = new GridLayoutManager(mContext, spanCount); 
    recyclerOne.setHasFixedSize(false); 
    recyclerOne.setLayoutManager(gridLayoutManager); 
    recyclerOne.addItemDecoration(new GridSpacingItemDecoration(spanCount, spacing, includeEdge)); 
    adapterOne = new RecylcerViewAdapter(new ArrayList<Datum>()); 
    recyclerOne.setAdapter(adapterOne); 
} 

的GridSpacingItemDecoration類是

public class GridSpacingItemDecoration extends RecyclerView.ItemDecoration { 

private int spanCount; 
private int spacing; 
private boolean includeEdge; 

public GridSpacingItemDecoration(int spanCount, int spacing, boolean includeEdge) { 
    this.spanCount = spanCount; 
    this.spacing = spacing; 
    this.includeEdge = includeEdge; 
} 

@Override 
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { 
    int position = parent.getChildAdapterPosition(view); // item position 
    int column = position % spanCount; // item column 

    if (includeEdge) { 
     outRect.left = spacing - column * spacing/spanCount; // spacing - column * ((1f/spanCount) * spacing) 
     outRect.right = (column + 1) * spacing/spanCount; // (column + 1) * ((1f/spanCount) * spacing) 

     if (position < spanCount) { // top edge 
      outRect.top = spacing; 
     } 
     outRect.bottom = spacing; // item bottom 
    } else { 
     outRect.left = column * spacing/spanCount; // column * ((1f/spanCount) * spacing) 
     outRect.right = spacing - (column + 1) * spacing/spanCount; // spacing - (column + 1) * ((1f/ spanCount) * spacing) 
     if (position >= spanCount) { 
      outRect.top = spacing; // item top 
     } 
    } 
} 

}

內回收視圖適配器類，綁定視圖使用過程中單個文本視圖與第一種方法中的可繪製圖像以及更新數據。要更新整個列表創建以下功能和活動類調用它：

public void updateItems(List<Datum> data) { 
    list.clear() 
    list.addAll(data) 
    notifyDataSetChanged(); 
} 

其他方法 還有另外一個方法，我知道這是由膨脹的項目，並添加放大的視圖上已經完成創建了線性佈局（或任何其他容器佈局）。

使用任何你喜歡的方法。享受編碼！

Answer 2

試試這個，這是靜態數據

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

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="horizontal"> 

    <LinearLayout 
     android:layout_width="80dp" 
     android:layout_height="80dp" 
     android:orientation="vertical"> 

     <ImageView 
      android:id="@+id/imageView4" 
      android:layout_width="match_parent" 
      android:layout_height="60dp" 
      android:src="@android:drawable/btn_star" /> 

     <TextView 
      android:id="@+id/textView9" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:gravity="center" 
      android:text="TextView" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="80dp" 
     android:layout_height="80dp" 
     android:orientation="vertical"> 

     <ImageView 
      android:id="@+id/img2" 
      android:layout_width="match_parent" 
      android:layout_height="60dp" 
      android:src="@android:drawable/btn_star" /> 

     <TextView 
      android:id="@+id/tekxjtView9" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:gravity="center" 
      android:text="TextView" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="80dp" 
     android:layout_height="80dp" 
     android:orientation="vertical"> 

     <ImageView 
      android:id="@+id/img3" 
      android:layout_width="match_parent" 
      android:layout_height="60dp" 
      android:src="@android:drawable/btn_star" /> 

     <TextView 
      android:id="@+id/txt3" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:gravity="center" 
      android:text="TextView" /> 
    </LinearLayout> 

</LinearLayout> 

動態數據使用 網格佈局，並使用上面的代碼爲適配器佈局