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

时间:2017-07-24 22:50:53

标签: android android-linearlayout relativelayout viewgroup flowlayout

我有一个Flow布局,显示行的4个对象,但我需要显示这4个对象,每个对象下面都有一个textview。但它显示2个图像和2个textview,并显示junp到另一行。我尝试创建一个ViewGroup来一起显示它们,但我得到了同样的结论。也许如果我尝试在组内部设置textView的位置运河工作,但我不知道怎么做。

我得到了什么: What I got:

我想要的: What I want:

我的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);

2 个答案:

答案 0 :(得分:2)

第一种方法:静态方式 我认为你需要的是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。 enter image description here

第二种方法:动态 以编程方式,可以使用网格布局生成许多视图。我使用recylerview实现的是

Inside Activity类:

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

}

在回收站视图适配器类中,在绑定视图期间,使用单个textview和可绘制图像,如第一种方法和更新数据。要更新整个列表,请创建以下函数并从活动类中调用它:

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

其他方法 还有另外一种我知道的方法是通过给项目充气并在已经创建的linearlayout(或任何其他容器布局)上添加膨胀的视图来完成。

使用您喜欢的任何方法。享受编码!

答案 1 :(得分: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并使用上面的代码作为适配器布局