Custom Layout Manager using predefined and develop

2019-05-11 05:57发布

问题:

Revised Question

When one looks online in tutorials, or by Google IO presentations, there are always just 2 kinds of UI customizations that one can do (but there are several implementations of doing each type). These customizations are:

  1. Creating a custom view that is a composite of existing views, or your own
  2. Creating a custom layout that is your own

However, what if I wanted to create a hybrid of these two? Specifically a Custom View that allow child views to be laid out how I define? There is nothing that I have found online (no tutorials, no videos) or even anything saying if this is even feasible.

Idea

Here is the Contacts App that has something very similar to what I want to do. You notice that every list item has a very similar layout. Nothing special here. I can create composite custom view with styleables to set the primary and secondary text, and the main and action icons.

However, my secret sauce comes with the idea of changing the primary text (the blacked-out region) to some other view in XML! This view could be a TextView, RatingBar, ProgressBar, VideoView, SurfaceView, etc...

Examples

TextView

Here is an example of using my custom view that takes in a developer-defined TextView.

<com.example.customview.BaseViewLayout 
    ...
    custom:imageMainIcon="..."
    custom:imageActionIcon="..."
    custom:secondaryText="Home">

    <TextView
        ...
        android:text="User-defined TextView"
        ... />

</com.example.customview.BaseViewLayout>

VideoView

Here is an example of using my same custom view that takes in a developer-defined VideoView.

<com.example.customview.BaseViewLayout 
    ...
    custom:imageMainIcon="..."
    custom:imageActionIcon="..."
    custom:secondaryText="Home">

    <VideoView
        ... />

</com.example.customview.BaseViewLayout>

Code

BaseCustomLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/detail_list_item"
    android:layout_width="450dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:minHeight="72dp"
    android:background="@color/material_blue_grey_800" >

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:layout_marginTop="24dp"
        android:layout_marginBottom="24dp"
        android:src="@drawable/ic_not_available_white"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/imageView" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="72dp"
        android:layout_marginStart="72dp"

        android:layout_marginRight="72dp"
        android:layout_marginEnd="72dp"
        android:paddingTop="16dp"
        android:paddingBottom="16dp"

        android:layout_toRightOf="@+id/imageView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">


        <ViewStub
            android:layout_height="20dp"
            android:layout_width="wrap_content"
            android:id="@+id/view_stub_main_view"
            android:inflatedId="@+id/inflated_main_view" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:paddingTop="4dp">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="16dp"
                android:text="Item Type"/>


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="16dp"
                android:textStyle="bold"
                android:text="  ·  "/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="16dp"

                android:text="Extra"/>

        </LinearLayout>

    </LinearLayout>

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_not_available_white"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="16dp"
        android:padding="8dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:id="@+id/imageView2" />

</RelativeLayout>

So, how does a person go about developing a custom view like this?