As UI getting more complicated -- but still some-part-repeated at the same time, the include
view component (or RecyclerView
with Adapter
in java) might be the best solution. However, since these parts are static and specific, I wonder if there's a way to build these UI in xml-only / editor-previewable style?
Below is a more elaborated question: I want to build a Setting Page, with items like this:
layout should be a list, filled with items -- each one has icon, text, and a arrow.
How can I do it?
On my first thought, I use include
.
I build a layout for single item names item_option_standard.xml
(below is a simplified version):
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/background_light">
<ImageView
android:id="@+id/itemIcon" />
<TextView
android:id="@+id/itemTitle" />
<TextView
android:id="@+id/itemSubtitle" />
<ImageButton
android:id="@+id/itemNext" />
<View
android:id="@+id/divider" />
</android.support.constraint.ConstraintLayout>
and re-use this by putting include
in my ScrollView
:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="@+id/optMyCash"
layout="@layout/item_option_standard"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<include
android:id="@+id/optHistory"
layout="@layout/item_option_standard"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<include
android:id="@+id/optAnnouncement"
layout="@layout/item_option_standard"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- and so on... -->
</LinearLayout>
</ScrollView>
In editor this is showed like:
The last step is to modify content step to step. I wrote a helper function:
public static void SetupOption(@NonNull View itemView, @DrawableRes int iconId, @NonNull String itemTitle, View.OnClickListener onClickListener) {
ImageView iconView = itemView.findViewById(R.id.itemIcon);
iconView.setImageResource(iconId);
TextView titleView = itemView.findViewById(R.id.itemTitle);
titleView.setText(itemTitle);
itemView.setOnClickListener(onClickListener);
}
and use this in my OnCreate
:
SetupOption(view.findViewById(R.id.optMyCash), R.drawable.ic_my_cash, getString(R.string.title_my_cash), onClickListener);
SetupOption(view.findViewById(R.id.optHistory), R.drawable.ic_history, getString(R.string.title_history), onClickListener);
SetupOption(view.findViewById(R.id.optAnnouncement), R.drawable.ic_announce, getString(R.string.title_announce), onClickListener);
// and so on...
Is there any alternative way to do "Step 3"? Especially, is there a chance to do that in xml / more static / editor-previewable way? The method beyond cannot be previewed in editor, and it's hard-to-view, hard-to-maintain (and some kind inefficient?)
You have to dynamically add the view. and just set the tag to the view which you want to use for click event and in the click event, you will get a view and just get the tag to differentiate the click event. see here
- If you getting ERROR
or something wrong then please comment down below.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.