Deprecated!
更好的实现方式: 使用 android.support.design.widget.CoordinatorLayout.
本文详细介绍如何实现如下图中的微博正文页面效果, 其中包括:
> 实现页面滚动时[转发-评论-赞]工具条的Sticky悬停效果
> 实现工具条切换, 并解决[转发-评论-赞]子页面item不足以占满屏幕时切换页面导致屏幕滚动的问题
知识要点:
ListView
ListView # HeaderView & FooterView
AbsListView.onScrollListener
ListAdapter
实现代码:
> 定义
- DetailActivity - 正文界面
- MiddleTab - 正文界面中的工具条
> 界面需求-1
首先实现的是Sticky悬停效果, 基本思路是:
- 设计正文界面的Layout-XML布局, 并以ListView来展示转发/评论/赞列表的详情.
- 设计MiddleTab的Layout-XML布局, 以android:visibility="gone"方式添加到上一个Layout-XML中, 这里的MiddleTab, 我们暂且叫它为Main-MiddleTab
- 设计另外一个布局, 包含正文布局和MiddleTab-Layout-XML, 并把它作为ListView的HeaderView, 我们暂且叫它为HeaderView-MiddlerTab
- 当ListView#HeaderView中的MiddleTab滚出屏幕顶部时, 显示Main-MiddleTab
进入正题前, 先介绍以下几个类和变量:
- [类] ScrollDetector - ListView滚动的辅助类, 它用来监听第一个Item滚动事件以及最后一个Item显示事件, 代码如下.
- [类] HdrViewHolder - 用保存HeaderView的Holder容器
- [变量] HdrViewHolder.middleTabs - HeaderView中的工具条
- [变量] mMiddleTabs - Main-MiddleTab
- [变量] mListView - 用来展示正文及详情的ListView
- [变量] mListAdapter - ListItem适配器, 在这里, 我们假设它为DetailsAdapter类型(支持ArrayAdapter的操作), 并假定它能完美支持转发/评论/赞列表(本文中将不实现DetailsAdapter代码, 因为它的代码实现和常规Adapter基本相同).
- [变量] R.id.*Tab - MiddleTab中转发/评论/赞所对应的RadioButton-id
import ... /**
* Detect scroll events of list or grid.
*/
public class ScrollDetector implements OnScrollListener {
/** @see #onScroll(android.widget.AbsListView, int, int, int) */
private boolean mFirstItemVisible = false;
private OnFirstItemScrollListener mFisListener;
private OnLastItemVisibleListener mLivListener; public ScrollDetector(OnFirstItemScrollListener fisListener,
OnLastItemVisibleListener livListener) {
mFisListener = fisListener;
mLivListener = livListener;
} public void setOnFirstItemScrollListener(OnFirstItemScrollListener listener) {
mFisListener = listener;
} public void setOnLastItemVisibleListener(OnLastItemVisibleListener listener) {
mLivListener = listener;
} @Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
if (mLivListener != null) {
if (triggerLastItemVisible(view, scrollState)) {
mLivListener.onLastItemVisible();
}
}
} private boolean triggerLastItemVisible(AbsListView view, int scrollState) {
return (scrollState == SCROLL_STATE_IDLE &&
(view.getLastVisiblePosition() == view.getCount() - 1));
} /**
* 用超高的初速度滚动AbsListView时, 可能会出现跳过firstVisibleItem=0的情况, 因此,
* 通过设置mFirstItemVisible来避免在出现上述情况时不会调用onFirstItemScroll的问题
*
* @see OnScrollListener#onScroll(android.widget.AbsListView, int, int, int)
*/
@Override
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
if (mFisListener != null) {
if (triggerFirstItemScroll(view, firstVisibleItem) || mFirstItemVisible) {
mFisListener.onFirstItemScroll(view.getChildAt(0));
if (!mFirstItemVisible) {
mFirstItemVisible = true;
}
} else {
if (mFirstItemVisible) {
mFirstItemVisible = false;
}
}
}
} private boolean triggerFirstItemScroll(AbsListView view, int firstVisibleItem) {
return (firstVisibleItem == 0);
} public static interface OnLastItemVisibleListener {
void onLastItemVisible();
} public static interface OnFirstItemScrollListener {
void onFirstItemScroll(View itemView);
}
}
ScrollDetector.java
Layout-XML代码略. 需要说明的是, 工具条是以RadioGroup方式实现的. 以下为DetailActivity.java代码:
import ...
public class DetailActivity extends Activity implements onClickListener, OnCheckedChangeListener, OnFirstItemScrollListener {
...
private ListView mListView;
private DetailsAdapter mListAdapter;
private RadioGroup mMiddleTabs;
private HdrViewHolder mHdrViewHolder;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
...
//initMiddleTabsStates(); // 暂时不用理会这行代码, 界面需求-2 会使用到它
initContent();
initDetails();
}
private void initContent() {
final LayoutInflater inflater = getLayoutInflater();
View hdrView = inflater.inflate(R.layout.item_detail_header, mListView, false);
mHdrViewHolder = new HdrViewHolder(hdrView);
mListView.addHeaderView(hdrView);
...
mHdrViewHolder.middleTabs.check(R.id.commentTab);
}
private void initDetails() {
mScrollDetector = new ScrollDetector(this, this);
mListView.setOnScrollListener(mScrollDetector);
mListAdapter = new DetailsAdapter(this);
mListView.setAdapter(wrapperAdapter);
mMiddleTabs.check(R.id.commentTab);
}
@Override
public void onClick(View v) {
int id = buttonView.getId();
switch(id) {
case R.id.forwardTab:
case R.id.commentTab:
case R.id.praiseTab:
if (!checked) {// 切换TAB前保存当前CommentTab的状态
updateMiddleTabs(id);
}
break;
}
}
private void updateMiddleTabs(int id) {
if (mMiddleTabs.getCheckedRadioButtonId() == id) {
mHdrViewHolder.middleTabs.check(id);
//restoreMiddleTabsStates();// 暂时不用理会这行代码, 界面需求-2 会使用到它
}
}
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
int id = buttonView.getId();
switch(id) {
case R.id.forwardTab:
case R.id.commentTab:
case R.id.praiseTab:
if (!checked) {// 切换TAB前保存当前CommentTab的状态
//saveMiddleTabsStates(id); // 暂时不用理会这行代码, 界面需求-2 会使用到它
}
break;
}
}
@Override
public void onFirstItemScroll(View itemView) {
int[] location = new int[2];
int[] location2 = new int[2];
mHdrViewHolder.middleTabs.getLocationOnScreen(location);
mMiddleTabs.getLocationOnScreen(location2);
boolean visible = (location[1] <= location2[1]);
mMiddleTabs.setVisibility(visible ? View.VISIBLE : View.GONE);
}
static class HdrViewHolder implements onClickListener {
...
@InjectView(R.id.tabs)
RadioGroup middleTabs;
HdrViewHolder(View view) {
...
middleTabs.setOnClickListener(this);
}
@Override
public void onClick(View v) {
int id = buttonView.getId();
switch(id) {
case R.id.forwardTab:
case R.id.commentTab:
case R.id.praiseTab:
if (!checked) {// 切换TAB前保存当前CommentTab的状态
updateMiddleTabs(id);
}
break;
}
}
private void updateMiddleTabs(int id) {
if (middleTabs.getCheckedRadioButtonId() == id) {
mMiddleTabs.check(id);
//restoreMiddleTabsStates();// 暂时不用理会这行代码, 界面需求-2 会使用到它
}
}
}
}
在上述代码中, 首先用ScrollDetector实现了Sticky悬停效果, 然后就是同步Main-MiddleTab和HeaderView-MiddlerTab的checked状态. 接下来, 再看如何实现界面需求-2.
> 界面需求-2
进入正题前, 我们还得介绍一个辅助类PlaceholderListAdapter, 它虽然有点像android系统的HeaderViewListAdapter, 但它却是我们用来应付Item未能占满ListView的情况的辅助类. 假想下当所有数据都加载到ListView的情况, 如果第一个数据项已经不显示在ListView上, 那么这时我们可以认为ListView已经被Item占满了, 否则, 就需要非数据项视图或者FooterView来占满空余的ListView. 而PlaceholderListAdapter的原理正是这样, 我们先预置一个类似FooterView的View给PlaceholderListAdapter, 并且在getView()时检测ListView是否已经需要显示该View了, 如果是, 则按上述逻辑来处理. 代码如下:
import ... /**
* PlaceholderListAdapter可以帮助我们解决这样的问题:<br> <ul><li>当所有Item视图不足以占满ListView时,
* 用空白视图来填充空白区域.</li></ul><br> 效果图见微博Android客户端的微博正文页面. 该适配器主要是用来提升用户体验的,
* 尤其是在切换TAB时.
*
* @see android.widget.HeaderViewListAdapter
*/
public class PlaceholderListAdapter implements WrapperListAdapter {
private final ListAdapter mAdapter; public class FixedViewInfo {
public View view;
public Object data;
public boolean isSelectable;
} private ArrayList<FixedViewInfo> mFooterViewInfos;
private View mPinnedHeaderView; public PlaceholderListAdapter(Context context, ListAdapter adapter) {
mAdapter = adapter;
mFooterViewInfos = new ArrayList<FixedViewInfo>();
init(context);
} private void init(Context context) {
View placeholder = new View(context);
placeholder.setLayoutParams(
new AbsListView.LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
addFooterView(placeholder, true);
} public void setPinnedHeaderView(View view) {
mPinnedHeaderView = view;
} public void addFooterView(View view) {
addFooterView(view, false);
} private void addFooterView(View view, boolean isPlaceholder) {
FixedViewInfo info = new FixedViewInfo();
info.view = view;
info.data = null;
info.isSelectable = true;
if (isPlaceholder) {
mFooterViewInfos.add(info);
} else {
mFooterViewInfos.add(mFooterViewInfos.size() - 1, info);
}
} public int getPlaceholdersCount() {
return mFooterViewInfos.size();
} @Override
public boolean hasStableIds() {
return (mAdapter != null) ? mAdapter.hasStableIds() : false;
} @Override
public boolean isEmpty() {
return mAdapter == null || mAdapter.isEmpty();
} @Override
public int getCount() {
int adapterCount = (mAdapter != null) ? mAdapter.getCount() : 0;
return getPlaceholdersCount() + adapterCount;
} @Override
public boolean areAllItemsEnabled() {
if (mAdapter != null) {
return mAdapter.areAllItemsEnabled();
} else {
return true;
}
} @Override
public boolean isEnabled(int position) {
if (mAdapter != null && position < mAdapter.getCount()) {
return mAdapter.isEnabled(position);
}
return false;
} @Override
public Object getItem(int position) {
int adapterCount = 0;
if (mAdapter != null) {
adapterCount = mAdapter.getCount();
if (position < adapterCount) {
return mAdapter.getItem(position);
}
} return mFooterViewInfos.get(position - adapterCount).data;
} @Override
public long getItemId(int position) {
if (mAdapter != null && position < mAdapter.getCount()) {
return mAdapter.getItemId(position);
} return -1;
} @Override
public View getView(int position, View convertView, ViewGroup parent) {
int adapterCount = 0;
if (mAdapter != null) {
adapterCount = mAdapter.getCount();
if (position < adapterCount) {
return mAdapter.getView(position, convertView, parent);
}
} View view = mFooterViewInfos.get(position - adapterCount).view;
if (position == getCount() - 1) {// 当convertView为占位View时
if (!(parent instanceof ListView)) {
throw new IllegalArgumentException("the parent is not a ListView.");
} ListView listView = (ListView) parent;
int startPosition = listView.getHeaderViewsCount();
int itemsHeight = (mPinnedHeaderView != null) ? mPinnedHeaderView.getHeight() : 0;
int firstVisiblePos = listView.getFirstVisiblePosition();
int lastVisiblePos = listView.getLastVisiblePosition();
if (startPosition >= firstVisiblePos) {// 第一个数据视图还在屏幕上, 此时需要占位视图
for (int i = startPosition; i <= lastVisiblePos; ++i) {
View childView = listView.getChildAt(i - firstVisiblePos);
itemsHeight += childView.getHeight();
}
} else {// 第一个数据视图已经滚出屏幕, 此时不需要显示占位视图
itemsHeight = listView.getHeight();
} ViewGroup.LayoutParams params = view.getLayoutParams();
if (params == null) {
throw new IllegalArgumentException("the layout parameters is not set.");
} params.height = listView.getHeight() - itemsHeight;
//view.setLayoutParams(params);
} return view;
} @Override
public int getItemViewType(int position) {
if (mAdapter != null && position < mAdapter.getCount()) {
return mAdapter.getItemViewType(position);
}
return AdapterView.ITEM_VIEW_TYPE_HEADER_OR_FOOTER;
} @Override
public int getViewTypeCount() {
return (mAdapter != null) ? mAdapter.getViewTypeCount() : 1;
} @Override
public void registerDataSetObserver(DataSetObserver observer) {
if (mAdapter != null) {
mAdapter.registerDataSetObserver(observer);
}
} @Override
public void unregisterDataSetObserver(DataSetObserver observer) {
if (mAdapter != null) {
mAdapter.unregisterDataSetObserver(observer);
}
} @Override
public ListAdapter getWrappedAdapter() {
return mAdapter;
}
}
PlaceholderListAdapter.java
既然有了PlaceholderListAdapter, 那后面就是很简单的事情了, 就只剩下在切换MiddleTab时保存ListView的滚动位置的问题了, 到这里, 就可以用到上面那些默默占位, 却没被理会的代码了. 代码如下:
private static class SavedState {
private int viewTop;
private int position;
private int loadState;
private List<Object> objects;
private SavedState() {
position = -1;
viewTop = 0;
objects = new ArrayList<Object>();
loadState = LOAD_STATE_IDLE;
}
}
private SparseArray<SavedState> mSavedStates;
private void initMiddleTabsStates() {
mSavedStates = new SparseArray<SavedState>();
int[] ids = {R.id.commentTab, R.id.praiseTab};
for (int id : ids) {
mSavedStates.put(id, new SavedState());
}
}
private void initDetails() {
mScrollDetector = new ScrollDetector(this, this);
mListView.setOnScrollListener(mScrollDetector);
mListAdapter = new DetailsAdapter(this);
//mListView.setAdapter(wrapperAdapter); // 这行代码只能满足界面需求-1
PlaceholderListAdapter wrapperAdapter = new PlaceholderListAdapter(this, mListAdapter);
wrapperAdapter.setPinnedHeaderView(mHdrViewHolder.middleTabs);
View footerView = getLayoutInflater().inflate(R.layout.load_more, mListView, false);
wrapperAdapter.addFooterView(footerView);
//wrapperAdapter.addPlaceholder(mPlaceholder);
mListView.setAdapter(wrapperAdapter);
mMiddleTabs.check(R.id.commentTab);
}
/**
* 还原对应ID的TAB的状态
*
* @see #saveMiddleTabsStates(int)
*/
private void restoreMiddleTabsStates() {
int id = mMiddleTabs.getCheckedRadioButtonId();
SavedState state = mSavedStates.get(id);
mListAdapter.setNotifyOnChange(false);
mListAdapter.clear();
mListAdapter.addAll(state.objects);
mListAdapter.notifyDataSetChanged();
if (mMiddleTabs.getVisibility() == View.VISIBLE) {
if (state.position == -1) {
setPinnedSavedState(state);
}
mListView.setSelectionFromTop(state.position, state.viewTop);
}
}
/**
* 保存对应ID的TAB的状态, 并在切换回来之后, 还原该TAB的状态
*
* @see #restoreMiddleTabsStates()
*/
private void saveMiddleTabsStates(int id) {
SavedState state = mSavedStates.get(id);
if (mMiddleTabs.getVisibility() == View.VISIBLE) {
View child = mListView.getChildAt(0);
int viewTop = ((child != null) ? (child.getTop() - mListView.getPaddingTop()) : 0);
state.position = mListView.getFirstVisiblePosition();
state.viewTop = viewTop;
} else {
setPinnedSavedState(state);
}
}
private void setPinnedSavedState(SavedState state) {
state.position = mListView.getHeaderViewsCount();
state.viewTop = mMiddleTabs.getHeight() - mListView.getPaddingTop();
}
到这里, 我们已经实现了微博正文界面. 需要说明的是使用PlaceholderListAdapter之后, 建议用PlaceholderListAdapter.addFooterView(View view)来替代ListView.addFooterView(View view)调用, 否则会在ListView的Item与FooterView之间出现空白区域, 那正是我们用来占满空余ListView的视图.
END.