Skip to content

Commit fd5608a

Browse files
AAChartModelAAChartModel
committed
Redesign expandable list UI with MaterialCardView
Refactored group and item layouts to use MaterialCardView for improved appearance and interaction. Added new drawable resources for color dots and chevron icons. Enhanced MyBaseExpandableListAdapter to support new UI elements, dynamic coloring, and indicator animations for expanded/collapsed states.
1 parent 48b679c commit fd5608a

File tree

5 files changed

+208
-51
lines changed

5 files changed

+208
-51
lines changed

‎sample/src/main/java/com/github/aachartmodel/aainfographics/demo/basiccontent/MyBaseExpandableListAdapter.kt‎

Lines changed: 61 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
package com.github.aachartmodel.aainfographics.demo.basiccontent
22

33
import android.content.Context
4+
import android.content.res.ColorStateList
45
import android.graphics.Color
56
import android.view.LayoutInflater
67
import android.view.View
78
import android.view.ViewGroup
89
import android.widget.BaseExpandableListAdapter
10+
import android.widget.ImageView
911
import android.widget.TextView
12+
import androidx.core.graphics.ColorUtils
13+
import androidx.core.view.ViewCompat
1014
import com.github.aachartmodel.aainfographics.demo.R
15+
import com.google.android.material.card.MaterialCardView
1116

1217
class MyBaseExpandableListAdapter(
1318
private val gData: Array<String>,
@@ -77,11 +82,35 @@ class MyBaseExpandableListAdapter(
7782
)
7883
groupHolder = ViewHolderGroup()
7984
groupHolder.tv_group_name = convertView.findViewById<View>(R.id.tv_group_name) as TextView
85+
groupHolder.iv_indicator = convertView.findViewById(R.id.iv_group_indicator) as ImageView
86+
groupHolder.cardContainer = convertView.findViewById(R.id.card_group_container) as MaterialCardView
8087
convertView.tag = groupHolder
8188
} else {
8289
groupHolder = convertView.tag as ViewHolderGroup
8390
}
84-
groupHolder.tv_group_name!!.text = gData[groupPosition]
91+
val accentColor = parseGroupColor(groupPosition)
92+
groupHolder.tv_group_name?.text = gData[groupPosition]
93+
groupHolder.tv_group_name?.setTextColor(ColorUtils.setAlphaComponent(accentColor, 230))
94+
95+
groupHolder.cardContainer?.strokeColor = ColorUtils.setAlphaComponent(accentColor, 60)
96+
groupHolder.cardContainer?.rippleColor = ColorStateList.valueOf(ColorUtils.setAlphaComponent(accentColor, 80))
97+
groupHolder.cardContainer?.setCardBackgroundColor(
98+
if (isExpanded) ColorUtils.setAlphaComponent(accentColor, 24) else Color.WHITE
99+
)
100+
101+
groupHolder.iv_indicator?.let { indicator ->
102+
val targetRotation = if (isExpanded) 180f else 0f
103+
if (indicator.rotation != targetRotation) {
104+
indicator.animate()?.cancel()
105+
indicator.animate()
106+
?.rotation(targetRotation)
107+
?.setDuration(200L)
108+
?.start()
109+
} else {
110+
indicator.animate()?.cancel()
111+
indicator.rotation = targetRotation
112+
}
113+
}
85114
return convertView
86115
}
87116

@@ -100,16 +129,33 @@ class MyBaseExpandableListAdapter(
100129
R.layout.item_exlist_item, parent, false
101130
)
102131
itemHolder = ViewHolderItem()
103-
itemHolder.tv_color_dot = convertView.findViewById<View>(R.id.tv_color_dot) as TextView
104-
itemHolder.tv_name = convertView.findViewById<View>(R.id.tv_name) as TextView
132+
itemHolder.cardContainer = convertView.findViewById(R.id.card_item_container) as MaterialCardView
133+
itemHolder.tv_color_dot = convertView.findViewById(R.id.tv_color_dot) as TextView
134+
itemHolder.tv_name = convertView.findViewById(R.id.tv_name) as TextView
135+
itemHolder.tv_subtitle = convertView.findViewById(R.id.tv_subtitle) as TextView
136+
itemHolder.ivChevron = convertView.findViewById(R.id.iv_item_chevron) as ImageView
105137
convertView.tag = itemHolder
106138
} else {
107139
itemHolder =
108140
convertView.tag as ViewHolderItem
109141
}
110-
val colorStr = colorsArr[groupPosition]
111-
itemHolder.tv_color_dot?.setTextColor(Color.parseColor(colorStr))
142+
val accentColor = parseGroupColor(groupPosition)
143+
itemHolder.tv_color_dot?.setTextColor(accentColor)
144+
itemHolder.tv_color_dot?.let {
145+
ViewCompat.setBackgroundTintList(
146+
it,
147+
ColorStateList.valueOf(ColorUtils.setAlphaComponent(accentColor, 60))
148+
)
149+
}
150+
112151
itemHolder.tv_name?.text = iData[groupPosition][childPosition]
152+
itemHolder.tv_subtitle?.setTextColor(ColorUtils.setAlphaComponent(accentColor, 170))
153+
154+
itemHolder.cardContainer?.strokeColor = ColorUtils.setAlphaComponent(accentColor, 45)
155+
itemHolder.cardContainer?.setCardBackgroundColor(ColorUtils.setAlphaComponent(accentColor, 16))
156+
itemHolder.cardContainer?.rippleColor = ColorStateList.valueOf(ColorUtils.setAlphaComponent(accentColor, 90))
157+
itemHolder.ivChevron?.rotation = -90f
158+
itemHolder.ivChevron?.imageTintList = ColorStateList.valueOf(ColorUtils.setAlphaComponent(accentColor, 200))
113159
return convertView
114160
}
115161

@@ -118,13 +164,23 @@ class MyBaseExpandableListAdapter(
118164
return true
119165
}
120166

167+
private fun parseGroupColor(groupPosition: Int): Int {
168+
val colorStr = colorsArr[groupPosition % colorsArr.size]
169+
return Color.parseColor(colorStr)
170+
}
171+
121172
private class ViewHolderGroup {
122173
var tv_group_name: TextView? = null
174+
var iv_indicator: ImageView? = null
175+
var cardContainer: MaterialCardView? = null
123176
}
124177

125178
private class ViewHolderItem {
179+
var cardContainer: MaterialCardView? = null
126180
var tv_color_dot: TextView? = null
127181
var tv_name: TextView? = null
182+
var tv_subtitle: TextView? = null
183+
var ivChevron: ImageView? = null
128184
}
129185

130186
}

‎sample/src/main/res/drawable/bg_chart_color_dot.xml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<shape xmlns:android="http://schemas.android.com/apk/res/android"
3+
android:shape="oval">
4+
<size
5+
android:width="36dp"
6+
android:height="36dp" />
7+
<solid android:color="#1A000000" />
8+
</shape>

‎sample/src/main/res/drawable/ic_chevron_down.xml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
3+
android:width="24dp"
4+
android:height="24dp"
5+
android:viewportWidth="24"
6+
android:viewportHeight="24">
7+
<path
8+
android:fillColor="#FF000000"
9+
android:pathData="M7.41,8.59L12,13.17l4.59,-4.58L18,10l-6,6 -6,-6z" />
10+
</vector>

‎sample/src/main/res/layout/item_exlist_group.xml‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,53 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2+
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:app="http://schemas.android.com/apk/res-auto"
4+
android:id="@+id/card_group_container"
35
android:layout_width="match_parent"
4-
android:layout_height="match_parent"
5-
android:orientation="horizontal"
6-
android:padding="5dp">
6+
android:layout_height="wrap_content"
7+
android:layout_marginStart="16dp"
8+
android:layout_marginTop="12dp"
9+
android:layout_marginEnd="16dp"
10+
android:layout_marginBottom="4dp"
11+
android:foreground="?attr/selectableItemBackground"
12+
app:cardCornerRadius="18dp"
13+
app:cardElevation="1dp"
14+
app:cardUseCompatPadding="false"
15+
app:strokeColor="@android:color/transparent"
16+
app:strokeWidth="1dp">
717

8-
<TextView
18+
<LinearLayout
19+
android:layout_width="match_parent"
20+
android:layout_height="wrap_content"
21+
android:orientation="horizontal"
22+
android:gravity="center_vertical"
23+
android:paddingStart="20dp"
24+
android:paddingTop="16dp"
25+
android:paddingEnd="20dp"
26+
android:paddingBottom="16dp">
27+
28+
<TextView
929
android:id="@+id/tv_group_name"
10-
android:layout_width="match_parent"
30+
android:layout_width="0dp"
1131
android:layout_height="wrap_content"
12-
android:layout_marginTop="8dp"
13-
android:layout_marginBottom="8dp"
14-
android:gravity="center_vertical"
15-
android:paddingLeft="30dp"
16-
android:text="AP"
32+
android:layout_weight="1"
33+
android:text="Charts"
34+
android:textColor="@android:color/black"
35+
android:textSize="18sp"
1736
android:textStyle="bold"
18-
android:textSize="20sp"
19-
android:textColor="#000000"
20-
/>
37+
android:ellipsize="end"
38+
android:maxLines="1"
39+
android:letterSpacing="0.02"
40+
android:fontFamily="sans-serif-medium" />
41+
42+
<ImageView
43+
android:id="@+id/iv_group_indicator"
44+
android:layout_width="24dp"
45+
android:layout_height="24dp"
46+
android:contentDescription="@string/abc_action_bar_home_description"
47+
android:rotation="0"
48+
android:src="@drawable/ic_chevron_down"
49+
android:tint="@android:color/darker_gray" />
50+
51+
</LinearLayout>
2152

22-
</LinearLayout>
53+
</com.google.android.material.card.MaterialCardView>

‎sample/src/main/res/layout/item_exlist_item.xml‎

Lines changed: 83 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,84 @@
11
<?xml version="1.0" encoding="utf-8"?>
2-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3-
android:layout_width="match_parent"
4-
android:layout_height="match_parent"
5-
android:orientation="horizontal"
6-
android:padding="5dp"
7-
android:background="#ffffff">
8-
<TextView
9-
android:id="@+id/tv_color_dot"
10-
android:layout_width="48dp"
11-
android:layout_height="match_parent"
12-
android:textSize="28dp"
13-
android:text="◉"
14-
android:gravity="center_vertical|center"
15-
></TextView>
16-
17-
<TextView
18-
android:id="@+id/tv_name"
19-
android:layout_width="match_parent"
20-
android:layout_height="match_parent"
21-
android:layout_marginLeft="5dp"
22-
android:layout_marginRight="5dp"
23-
android:layout_marginTop="5dp"
24-
android:layout_marginBottom="5dp"
25-
android:focusable="false"
26-
android:text="图表名称"
27-
android:gravity="center_vertical|left"
28-
android:textSize="18sp"
29-
android:textColor="#123456"
30-
/>
31-
32-
</LinearLayout>
2+
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:app="http://schemas.android.com/apk/res-auto"
4+
android:id="@+id/card_item_container"
5+
android:layout_width="match_parent"
6+
android:layout_height="wrap_content"
7+
android:layout_marginStart="24dp"
8+
android:layout_marginTop="6dp"
9+
android:layout_marginEnd="24dp"
10+
android:layout_marginBottom="6dp"
11+
android:foreground="?attr/selectableItemBackground"
12+
app:cardCornerRadius="16dp"
13+
app:cardElevation="0dp"
14+
app:cardUseCompatPadding="false"
15+
app:strokeColor="@android:color/transparent"
16+
app:strokeWidth="1dp"
17+
app:rippleColor="?attr/colorControlHighlight">
18+
19+
<LinearLayout
20+
android:layout_width="match_parent"
21+
android:layout_height="wrap_content"
22+
android:orientation="horizontal"
23+
android:gravity="center_vertical"
24+
android:paddingStart="20dp"
25+
android:paddingTop="14dp"
26+
android:paddingEnd="16dp"
27+
android:paddingBottom="14dp">
28+
29+
<TextView
30+
android:id="@+id/tv_color_dot"
31+
android:layout_width="36dp"
32+
android:layout_height="36dp"
33+
android:gravity="center"
34+
android:text="●"
35+
android:textColor="#FF5722"
36+
android:textSize="18sp"
37+
android:background="@drawable/bg_chart_color_dot"
38+
android:fontFamily="sans-serif-medium" />
39+
40+
<LinearLayout
41+
android:layout_width="0dp"
42+
android:layout_height="wrap_content"
43+
android:layout_marginStart="16dp"
44+
android:layout_weight="1"
45+
android:orientation="vertical">
46+
47+
<TextView
48+
android:id="@+id/tv_name"
49+
android:layout_width="match_parent"
50+
android:layout_height="wrap_content"
51+
android:ellipsize="end"
52+
android:fontFamily="sans-serif-medium"
53+
android:maxLines="1"
54+
android:text="图表名称"
55+
android:textColor="@android:color/black"
56+
android:textSize="16sp"
57+
android:textStyle="bold" />
58+
59+
<TextView
60+
android:id="@+id/tv_subtitle"
61+
android:layout_width="match_parent"
62+
android:layout_height="wrap_content"
63+
android:layout_marginTop="4dp"
64+
android:ellipsize="end"
65+
android:maxLines="1"
66+
android:text="点击查看示例"
67+
android:textColor="@android:color/darker_gray"
68+
android:textSize="13sp" />
69+
70+
</LinearLayout>
71+
72+
<ImageView
73+
android:id="@+id/iv_item_chevron"
74+
android:layout_width="20dp"
75+
android:layout_height="20dp"
76+
android:layout_marginStart="8dp"
77+
android:contentDescription="@string/abc_action_bar_home_description"
78+
android:src="@drawable/ic_chevron_down"
79+
android:tint="@android:color/darker_gray"
80+
android:rotation="-90" />
81+
82+
</LinearLayout>
83+
84+
</com.google.android.material.card.MaterialCardView>

0 commit comments

Comments
 (0)