expanding-collection-android
介绍：
一个可以展开查看详情的卡片＋ViewPager效果。
运行效果：
使用说明：
需求
- Android 4.0 IceCreamSandwich (API lvl 14) 及其以上
Gradle:
'com.ramotion.expandingcollection:expanding-collection:0.9.0'
- 在布局中添加一个背景切换元素ECBackgroundSwitcherView以及一个pager元素ECPagerView。ECPagerView width必须为match_parent，height为wrap_content。你可以使用alignment/gravity或者top margin来调节其垂直位置。ECBackgroundSwitcherView是一个动态的背景切换控件，所以通常和它的parent一样大小。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.ramotion.expandingcollection.ECBackgroundSwitcherView
android:id="@+id/ec_bg_switcher_element"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.ramotion.expandingcollection.ECPagerView
android:id="@+id/ec_pager_element"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
</RelativeLayout>
- 调整
ECPagerView: 设置收缩状态下的卡片大小以及展开状态的header高度。
<com.ramotion.expandingcollection.ECPagerView xmlns:ec="http://schemas.android.com/apk/res-auto"
android:id="@+id/ec_pager_element"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
ec:cardHeaderHeightExpanded="150dp"
ec:cardHeight="200dp"
ec:cardWidth="250dp" />
- 展开的card包含两部分：一个带背景的header（收缩的时候是可见的）以及一个列表元素（只有在展开的时候可见），所以你需要一个列表item 的xml布局 。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/list_item_text"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="center_vertical|center_horizontal"
android:background="@color/colorPrimary"
android:textAlignment="center" />
</FrameLayout>
- 你还需要实现一个自定义的list adapter ，继承com.ramotion.expandingcollection.ECCardContentListItemAdapter.java类，其中T是item数据对象的类型 。在下面的例子中，T只是一个String对象 。
public class CardListItemAdapter extends ECCardContentListItemAdapter<String> {
public CardListItemAdapter(@NonNull Context context, @NonNull List<String> objects) {
super(context, R.layout.list_item, objects);
}
@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
ViewHolder viewHolder;
View rowView = convertView;
if (rowView == null) {
LayoutInflater inflater = LayoutInflater.from(getContext());
rowView = inflater.inflate(R.layout.list_item, null);
viewHolder = new ViewHolder();
viewHolder.itemText = (TextView) rowView.findViewById(R.id.list_item_text);
rowView.setTag(viewHolder);
} else {
viewHolder = (ViewHolder) rowView.getTag();
}
String item = getItem(position);
if (item != null) {
viewHolder.itemText.setText(item);
}
return rowView;
}
static class ViewHolder {
TextView itemText;
}
}
- 你的数据类必须实现com.ramotion.expandingcollection.ECCardData.java接口，T代表item的类型
public class CardDataImpl implements ECCardData<String> {
private String cardTitle;
private Integer mainBackgroundResource;
private Integer headBackgroundResource;
private List<String> listItems;
@Override
public Integer getMainBackgroundResource() {
return mainBackgroundResource;
}
@Override
public Integer getHeadBackgroundResource() {
return headBackgroundResource;
}
@Override
public List<String> getListItems() {
return listItems;
}
}
- 最后要做的事情是提供pager的adapter。实现只有一个方法的抽象类 com.ramotion.expandingcollection.ECPagerViewAdapter.java 就可以了。
public class MainActivity extends Activity {
private ECPagerView ecPagerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Get pager from layout
ecPagerView = (ECPagerView) findViewById(R.id.ec_pager_element);
// Generate example dataset
List<ECCardData> dataset = CardDataImpl.generateExampleData();
// Implement and pager adapter and set it to pager view
ecPagerView.setPagerViewAdapter(new ECPagerViewAdapter(getApplicationContext(), dataset) {
@Override
public void instantiateCard(LayoutInflater inflaterService, ViewGroup head, ListView list, ECCardData data) {
// Data object for current card
CardDataImpl cardData = (CardDataImpl) data;
// Set adapter and items to current card content list
list.setAdapter(new CardListItemAdapter(getApplicationContext(), cardData.getListItems()));
// Also some visual tuning can be done here
list.setBackgroundColor(Color.WHITE);
// Here we can create elements for head view or inflate layout from xml using inflater service
TextView cardTitle = new TextView(getApplicationContext());
cardTitle.setText(cardData.getCardTitle());
cardTitle.setTextSize(COMPLEX_UNIT_DIP, 20);
FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT);
layoutParams.gravity = Gravity.CENTER;
head.addView(cardTitle, layoutParams);
// Card toggling by click on head element view
head.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(final View v) {
ecPagerView.toggle();
}
});
}
});
// Add background switcher to pager view
ecPagerView.setBackgroundSwitcherView((ECBackgroundSwitcherView) findViewById(R.id.ec_bg_switcher_element));
}
// Card collapse on back pressed
@Override
public void onBackPressed() {
if (!ecPagerView.collapse())
super.onBackPressed();
}
}
已下载
0