通过扩大布局来创建自定义视图?


107

我正在尝试创建一个自定义视图,该视图将替换我在多个地方使用的特定布局,但是我为此很努力。

基本上,我想替换为:

<RelativeLayout
 android:id="@+id/dolphinLine"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
    android:layout_centerInParent="true"
 android:background="@drawable/background_box_light_blue"
 android:padding="10dip"
 android:layout_margin="10dip">
  <TextView
   android:id="@+id/dolphinTitle"
   android:layout_width="200dip"
   android:layout_height="100dip"
   android:layout_alignParentLeft="true"
   android:layout_marginLeft="10dip"
   android:text="@string/my_title"
   android:textSize="30dip"
   android:textStyle="bold"
   android:textColor="#2E4C71"
   android:gravity="center"/>
  <Button
   android:id="@+id/dolphinMinusButton"
   android:layout_width="100dip"
   android:layout_height="100dip"
   android:layout_toRightOf="@+id/dolphinTitle"
   android:layout_marginLeft="30dip"
   android:text="@string/minus_button"
   android:textSize="70dip"
   android:textStyle="bold"
   android:gravity="center"
   android:layout_marginTop="1dip"
   android:background="@drawable/button_blue_square_selector"
   android:textColor="#FFFFFF"
   android:onClick="onClick"/>
  <TextView
   android:id="@+id/dolphinValue"
   android:layout_width="100dip"
   android:layout_height="100dip"
   android:layout_marginLeft="15dip"
   android:background="@android:drawable/editbox_background"
   android:layout_toRightOf="@+id/dolphinMinusButton"
   android:text="0"
   android:textColor="#2E4C71"
   android:textSize="50dip"
   android:gravity="center"
   android:textStyle="bold"
   android:inputType="none"/>
  <Button
   android:id="@+id/dolphinPlusButton"
   android:layout_width="100dip"
   android:layout_height="100dip"
   android:layout_toRightOf="@+id/dolphinValue"
   android:layout_marginLeft="15dip"
   android:text="@string/plus_button"
   android:textSize="70dip"
   android:textStyle="bold"
   android:gravity="center"
   android:layout_marginTop="1dip"
   android:background="@drawable/button_blue_square_selector"
   android:textColor="#FFFFFF"
   android:onClick="onClick"/>
</RelativeLayout>

这样:

<view class="com.example.MyQuantityBox"
    android:id="@+id/dolphinBox"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:myCustomAttribute="@string/my_title"/>

因此,我不需要自定义布局,我想要自定义视图(该视图不可能有子视图)。

可以从MyQuantityBox的一个实例更改为另一个实例的唯一内容是标题。我非常希望能够在XML中指定它(就像我在最后XML行中所做的那样)

我怎样才能做到这一点?是否应该将RelativeLayout放在/ res / layout中的XML文件中,并在MyBoxQuantity类中对其进行充气?如果是,我该怎么做?

谢谢!


请参阅Android“的复合控件”,而这个链接:stackoverflow.com/questions/1476371/...
greg7gkb

Answers:


27

是的,您可以这样做。RelativeLayout,LinearLayout等是View,因此自定义布局是自定义视图。这只是要考虑的问题,因为如果您想创建自定义布局,则可以。

您要做的是创建一个复合控件。您将创建RelativeLayout的子类,将我们所有的组件添加到代码中(TextView等),在构造函数中,您可以读取从XML传入的属性。然后,您可以将该属性传递给标题TextView。

http://developer.android.com/guide/topics/ui/custom-components.html


130

有点老了,但我想根据chubbsondubs的回答分享我的操作方法:我使用FrameLayout(请参阅Documentation),因为它用于包含单个视图,并从xml扩展视图。

代码如下:

public class MyView extends FrameLayout {
    public MyView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView();
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public MyView(Context context) {
        super(context);
        initView();
    }

    private void initView() {
        inflate(getContext(), R.layout.my_view_layout, this);
    }
}

13
由于View类具有静态充气()方法是没有必要LayoutInflater.from()
边远

1
这不只是Johannes的解决方案,这里:stackoverflow.com/questions/17836695/…不过,这会使内部的另一种布局膨胀。因此,这并不是我想的最佳解决方案。
Tobias Reich 2014年

3
是的,但是Johannes解决方案来自7.24.13,头脑来自7.1.13...。此外,我的解决方案使用FrameLayout,它应该仅包含一个View(如解决方案中引用的文档所写)。因此,实际上它打算用作View的占位符。我不知道没有使用占位符显示膨胀视图的解决方案。
福克斯

我不明白 该方法(膨胀)返回一个视图,该视图将被忽略。似乎您需要将其添加到当前视图。
Jeffrey Blattman

1
@Jeffrey Blattman请查看View.inflate方法,我们使用此方法(将根指定为this,3rd参数)
V1raNi

35

这是一个简单的演示,通过从xml扩展来创建customview(compoundview)

attrs.xml

<resources>

    <declare-styleable name="CustomView">
        <attr format="string" name="text"/>
        <attr format="reference" name="image"/>
    </declare-styleable>
</resources>

CustomView.kt

class CustomView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) :
        ConstraintLayout(context, attrs, defStyleAttr) {

    init {
        init(attrs)
    }

    private fun init(attrs: AttributeSet?) {
        View.inflate(context, R.layout.custom_layout, this)

        val ta = context.obtainStyledAttributes(attrs, R.styleable.CustomView)
        try {
            val text = ta.getString(R.styleable.CustomView_text)
            val drawableId = ta.getResourceId(R.styleable.CustomView_image, 0)
            if (drawableId != 0) {
                val drawable = AppCompatResources.getDrawable(context, drawableId)
                image_thumb.setImageDrawable(drawable)
            }
            text_title.text = text
        } finally {
            ta.recycle()
        }
    }
}

custom_layout.xml

我们应该merge在这里使用而不是ConstraintLayout因为

如果ConstraintLayout在这里使用,布局层次结构将是ConstraintLayout-> ConstraintLayout-> ImageView+ TextView=>我们有1个冗余ConstraintLayout=>对性能不是很好

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:parentTag="android.support.constraint.ConstraintLayout">

    <ImageView
        android:id="@+id/image_thumb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:ignore="ContentDescription"
        tools:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/text_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="@id/image_thumb"
        app:layout_constraintStart_toStartOf="@id/image_thumb"
        app:layout_constraintTop_toBottomOf="@id/image_thumb"
        tools:text="Text" />

</merge>

使用 activity_main.xml

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

    <your_package.CustomView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f00"
        app:image="@drawable/ic_android"
        app:text="Android" />

    <your_package.CustomView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0f0"
        app:image="@drawable/ic_adb"
        app:text="ADB" />

</LinearLayout>

结果

在此处输入图片说明

Github演示


4
这应该是该线程中被接受或投票最多的答案,因为它提到了不必要的布局层次结构。
Farid

15

如下所示,使用LayoutInflater。

    public View myView() {
        View v; // Creating an instance for View Object
        LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        v = inflater.inflate(R.layout.myview, null);

        TextView text1 = v.findViewById(R.id.dolphinTitle);
        Button btn1 = v.findViewById(R.id.dolphinMinusButton);
        TextView text2 = v.findViewById(R.id.dolphinValue);
        Button btn2 = v.findViewById(R.id.dolphinPlusButton);

        return v;
    }

我已经尝试过了。它的工作正常。但是,当我单击btn1时,它将调用Web服务,并且在收到服务器的响应后,我想更新一些特定位置的文本text2..any帮助。
harikrishnan

7

在实践中,我发现您需要特别小心,特别是如果您反复使用一点xml。例如,假设您有一个表,希望为列表中的每个条目创建一个表行。您已经设置了一些xml:

my_table_row.xml

<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android" 
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent" android:id="@+id/myTableRow">
    <ImageButton android:src="@android:drawable/ic_menu_delete" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/rowButton"/>
    <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="TextView" android:id="@+id/rowText"></TextView>
</TableRow>

然后,您需要使用一些代码每行创建一次。假定您已定义父TableLayout myTable来将行附加到该表。

for (int i=0; i<numRows; i++) {
    /*
     * 1. Make the row and attach it to myTable. For some reason this doesn't seem
     * to return the TableRow as you might expect from the xml, so you need to
     * receive the View it returns and then find the TableRow and other items, as
     * per step 2.
     */
    LayoutInflater inflater = (LayoutInflater)getBaseContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View v =  inflater.inflate(R.layout.my_table_row, myTable, true);

    // 2. Get all the things that we need to refer to to alter in any way.
    TableRow    tr        = (TableRow)    v.findViewById(R.id.profileTableRow);
    ImageButton rowButton = (ImageButton) v.findViewById(R.id.rowButton);
    TextView    rowText   = (TextView)    v.findViewById(R.id.rowText);

    // 3. Configure them out as you need to
    rowText.setText("Text for this row");
    rowButton.setId(i); // So that when it is clicked we know which one has been clicked!
    rowButton.setOnClickListener(this); // See note below ...           

    /*
     * To ensure that when finding views by id on the next time round this
     * loop (or later) gie lots of spurious, unique, ids.
     */
    rowText.setId(1000+i);
    tr.setId(3000+i);
}

有关处理rowButton.setOnClickListener(this)的简单明了的示例,请参见Onclicklistener以编程方式创建的button


嗨,尼尔,我也尝试过。它的工作正常。但是,当我单击rowButton时,它将调用Web服务,并且在收到服务器的响应后,我想更新特定位置rowText..any帮助中的某些文本?
harikrishnan

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.