带图标的自定义LinearLayout

时间:2017-09-19 09:12:06

标签: android android-layout

我有一堆表单控件,左边都显示一个Icon,如下所示:

enter image description here

为此,我有这段代码:

<LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="8dp"
                    android:layout_weight="1"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="@dimen/icon_edittext_height"
                        android:layout_gravity="top"
                        android:layout_marginRight="@dimen/icon_edittext_marginRight"
                        android:layout_marginTop="@dimen/icon_edittext_margintop"
                        android:src="@drawable/ic_location_city_black_24dp"/>

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">

                        <android.support.design.widget.TextInputLayout
                            android:id="@+id/create.data.city.layout"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            >
                            <AutoCompleteTextView
                                android:id="@+id/create.data.city"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:hint="@string/create_event_city"
                                android:imeOptions="actionNext"
                                android:inputType="textCapSentences"
                                android:maxLines="1"
                                />

                        </android.support.design.widget.TextInputLayout>

                    </FrameLayout>

                </LinearLayout>

现在因为我有大约20个控件,我不想重复:

<LinearLayout> 
    <ImageView/> 
    <FrameLayout> 
         ...content....
    </FrameLayout> 
</LinearLayout>
架构20次,但我想做这样的事情:

<MycustomLayout>
    <EditText .../>
</MycustomLayout>

<MycustomLayout>
    <Spinner ... />
</MycustomLayout>

所以基本上我想创建一个扩展Linear的自定义Layout,我希望能够以与使用LinearLayout相同的方式使用它,同时始终有一个图标。

3 个答案:

答案 0 :(得分:0)

您可以尝试在布局中使用include标记来包含重复的部分。或者,如果这不起作用,你可以尝试这样的事情:

public class CustomControl extends LinearLayout {

    public CustomControl (Context context, AttributeSet attrs) {
        super(context, attrs);

        LayoutInflater inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        inflater.inflate(R.layout.custom_layout, this);
    }
}

custom_layout是自定义视图的布局。 然后你可以在xml中执行:

<CustomControl />

UPD: 为了在xml中添加子视图,只需覆盖onFinishInflate并添加如下视图:

    protected void onFinishInflate() {      
        View[] children = detachChildren(); 
        for (int i = 0; i < children.length; i++)
           this.addView(children[i]);
        }

答案 1 :(得分:0)

无需添加太多布局。试着用这个......

<android.support.design.widget.TextInputLayout
    android:id="@+id/create.data.city.layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <AutoCompleteTextView
        android:id="@+id/create.data.city"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="City"
        android:drawableLeft="@drawable/ic_location_city_black_24dp"
        android:drawablePadding="5dp"
        android:imeOptions="actionNext"
        android:inputType="textCapSentences"
        android:maxLines="1" />

</android.support.design.widget.TextInputLayout>

答案 2 :(得分:0)

我自己解决了这个问题:

public class IconFieldLinearLayout extends LinearLayout {


    private Drawable mDefaultDrawable;

    public IconFieldLinearLayout(Context context) {
        super(context);
        init(context, null);
    }

    public IconFieldLinearLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public IconFieldLinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public IconFieldLinearLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {
        this.setOrientation(HORIZONTAL);
        mDefaultDrawable = getResources().getDrawable(R.drawable.tv_avatar_default);
        initAttr(context, attrs);
    }

    private void initAttr(Context context, AttributeSet attrs) {

        if (attrs != null) {
            TypedArray a = context.obtainStyledAttributes(attrs,
                    R.styleable.IconFieldLinearLayout, 0, 0);
            Drawable icon = a.getDrawable(R.styleable.IconFieldLinearLayout_icon);
            a.recycle();
            initIcon(context, icon);
        }
        else {
            initIcon(context, mDefaultDrawable);
        }
    }

    private void initIcon(Context context, Drawable icon) {
        ImageView imageView = new ImageView(context);
        imageView.setColorFilter(ContextCompat.getColor(context, R.color.colorAccent));
        int dimension = getResources().getDimensionPixelSize(R.dimen.icon_edittext_height);
        int marginRight = getResources().getDimensionPixelSize(R.dimen.icon_edittext_marginRight);
        int marginTop = getResources().getDimensionPixelSize(R.dimen.icon_edittext_margintop);
        LinearLayout.LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, dimension);
        layoutParams.gravity = Gravity.TOP;
        layoutParams.setMargins(0, marginTop, marginRight, 0);
        imageView.setImageDrawable(icon);
        addView(imageView, layoutParams);
    }


}

真的不需要将FrameLayout放在那里。