创建 ImageView 和 TextView 的 ViewGroup 并以编程方式在 FlowLayout 中显示它 - Android

Question

我有一个 Flow 布局，它为一行显示 4 个对象，但我需要显示这 4 个对象，每个对象下方都有一个文本视图。但它显示 2 个图像和 2 个文本视图，并跳转到另一行。我试图创建一个 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

试试这个，这些是静态数据

<?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>

用于动态数据使用 gridlayout 并使用上面的代码作为适配器布局

Answer 2

第一种方法：静态方式 我认为您需要的是 TextView 上的可绘制图像。可绘制图像可以插入除中心以外的任何位置。从 asset studio 创建所需尺寸的合适图像并在 TextView 上使用此行。

android:drawableTop="@drawable/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 的实现如下

里面 Activity class:

@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);
}

GridSpacingItemDecorationclass是

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
        }
    }
}

}

在回收器视图适配器中 class，在绑定视图期间，像第一种方法一样使用带有可绘制图像的单个文本视图并更新数据。要更新整个列表，您可以创建以下函数并从 activity class:

中调用它

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

其他方法 我还知道另一种方法，它是通过膨胀一个项目并在已经创建的线性布局（或任何其他容器布局）上添加膨胀视图来完成的。

使用任何你喜欢的方法。享受编码吧！

创建 ImageView 和 TextView 的 ViewGroup 并以编程方式在 FlowLayout 中显示它 - Android

Create ViewGroup of ImageView and TextView and display it in FlowLayout Programmatically - Android

android

android-linearlayout

android-relativelayout

viewgroup

flowlayout