仿QQ消息栏中的消息和电话切换功能
2015-12-14 18:19
253 查看
首先我们来看看布局,代码如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <RelativeLayout android:layout_width="match_parent" android:layout_height="48dp" android:background="@color/blue" > <ImageView android:id="@+id/record_file_back" android:layout_width="48dp" android:layout_height="48dp" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:background="@drawable/activity_onclick_selector" android:clickable="true" android:onClick="recordClick" android:padding="10dp" android:src="@drawable/activity_back" /> <com.example.textdemo.PagerSlidingTabStrip xmlns:app="http://schemas.android.com/apk/res/com.example.textdemo" android:id="@+id/fragment_main_tabs" android:layout_width="160dp" android:layout_height="45dp" android:layout_centerInParent="true" android:layout_marginLeft="10dp" android:background="@android:color/transparent"//背景颜色 app:dividerColor="@android:color/white"//中间分隔线颜色 app:indicatorColor="#29000000"//选中的背景颜色 app:indicatorHeight="45dp" app:tabTextSelectedColor="#ffffff"//选中字体颜色 app:tabTextSize="18sp" app:tabTextUnselectedColor="#ffffff"//没选中字体颜色 app:underlineColor="@color/white_color"//下划线颜色 app:underlineHeight="2px" //下划线宽度> </com.example.textdemo.PagerSlidingTabStrip> </RelativeLayout> <com.example.textdemo.NoScrollViewPager android:id="@+id/record_file_ViewPager" android:layout_width="wrap_content" android:layout_height="wrap_content" > </com.example.textdemo.NoScrollViewPager> </LinearLayout>
在代码中我们很明显的可以看出定义了两View.PagerSlidingTabStrip 主要功能就是在这个View中实现的. 代码如下:
import java.util.Locale;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Parcel;
import android.os.Parcelable;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.View;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.HorizontalScrollView;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView;
public class PagerSlidingTabStrip extends HorizontalScrollView {
public interface IconTabProvider {
public int getPageIconResId(int position);
}
// @formatter:off
private static final int[] ATTRS = new int[] { android.R.attr.textSize,
android.R.attr.textColor };
// @formatter:on
private LinearLayout.LayoutParams defaultTabLayoutParams;
private LinearLayout.LayoutParams expandedTabLayoutParams;
private final PageListener pageListener = new PageListener();
public OnPageChangeListener delegatePageListener;
private LinearLayout tabsContainer;
private ViewPager pager;
private int tabCount;
private int currentPosition = 0;
private float currentPositionOffset = 0f;
private Paint rectPaint;
private Paint dividerPaint;
private boolean checkedTabWidths = false;
private int indicatorColor = 0x3da6f9;
private int underlineColor = Color.TRANSPARENT;
private int dividerColor = 0x52000000;
private boolean shouldExpand = false;
private boolean textAllCaps = true;// 大写
private int scrollOffset = 52;
private int indicatorHeight = 8;
private int underlineHeight = 2;
private int dividerPadding = 12;
private int tabPadding = 24;
private int dividerWidth = 1;
private int tabTextSize;
private int tabSelectedTextColor;
private int tabUnselectedTextColor;
private int lastScrollX = 0;
private Drawable tabBackground;
private Locale locale;
public PagerSlidingTabStrip(Context context) {
this(context, null);
}
public PagerSlidingTabStrip(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public PagerSlidingTabStrip(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
setFillViewport(true);
setWillNotDraw(false);
tabsContainer = new LinearLayout(context);
tabsContainer.setOrientation(LinearLayout.HORIZONTAL);
tabsContainer.setLayoutParams(new LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
addView(tabsContainer);
DisplayMetrics dm = getResources().getDisplayMetrics();
scrollOffset = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, scrollOffset, dm);
indicatorHeight = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, indicatorHeight, dm);
underlineHeight = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, underlineHeight, dm);
dividerPadding = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, dividerPadding, dm);
tabPadding = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, tabPadding, dm);
dividerWidth = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, dividerWidth, dm);
tabTextSize = (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, tabTextSize, dm);
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.PagerSlidingTabStrip);
tabSelectedTextColor = a.getColor(
R.styleable.PagerSlidingTabStrip_tabTextSelectedColor,
0xFFFFFFFF);
tabUnselectedTextColor = a.getColor(
R.styleable.PagerSlidingTabStrip_tabTextUnselectedColor,
0xFFFFFFFF);
indicatorColor = a
.getColor(R.styleable.PagerSlidingTabStrip_indicatorColor,
indicatorColor);
underlineColor = a
.getColor(R.styleable.PagerSlidingTabStrip_underlineColor,
underlineColor);
dividerColor = a.getColor(
R.styleable.PagerSlidingTabStrip_dividerColor, dividerColor);
tabTextSize = a.getDimensionPixelSize(
R.styleable.PagerSlidingTabStrip_tabTextSize, 12);
indicatorHeight = a.getDimensionPixelSize(
R.styleable.PagerSlidingTabStrip_indicatorHeight,
indicatorHeight);
underlineHeight = a.getDimensionPixelSize(
R.styleable.PagerSlidingTabStrip_underlineHeight,
underlineHeight);
dividerPadding = a.getDimensionPixelSize(
R.styleable.PagerSlidingTabStrip_dividerTabPadding,
dividerPadding);
tabPadding = a.getDimensionPixelSize(
R.styleable.PagerSlidingTabStrip_tabPaddingLeftRight,
tabPadding);
tabBackground = a
.getDrawable(R.styleable.PagerSlidingTabStrip_tabBackground);
shouldExpand = a.getBoolean(
R.styleable.PagerSlidingTabStrip_shouldExpand, shouldExpand);
scrollOffset = a.getDimensionPixelSize(
R.styleable.PagerSlidingTabStrip_scrollOffset, scrollOffset);
textAllCaps = a.getBoolean(
R.styleable.PagerSlidingTabStrip_textContentAllCaps,
textAllCaps);
a.recycle();
rectPaint = new Paint();
rectPaint.setAntiAlias(true);
rectPaint.setStyle(Style.FILL);
dividerPaint = new Paint();
dividerPaint.setAntiAlias(true);
dividerPaint.setStrokeWidth(dividerWidth);
defaultTabLayoutParams = new LinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
expandedTabLayoutParams = new LinearLayout.LayoutParams(0,
LayoutParams.MATCH_PARENT, 1.0f);
if (locale == null) {
locale = getResources().getConfiguration().locale;
}
}
public void setViewPager(ViewPager pager) {
this.pager = pager;
if (pager.getAdapter() == null) {
throw new IllegalStateException(
"ViewPager does not have adapter instance.");
}
pager.setOnPageChangeListener(pageListener);
notifyDataSetChanged();
}
public void setOnPageChangeListener(OnPageChangeListener listener) {
this.delegatePageListener = listener;
}
public void notifyDataSetChanged() {
tabsContainer.removeAllViews();
tabCount = pager.getAdapter().getCount();
for (int i = 0; i < tabCount; i++) {
if (pager.getAdapter() instanceof IconTabProvider) {
addIconTab(i,
((IconTabProvider) pager.getAdapter())
.getPageIconResId(i));
} else {
addTextTab(i, pager.getAdapter().getPageTitle(i).toString());
}
}
updateTabStyles();
checkedTabWidths = false;
getViewTreeObserver().addOnGlobalLayoutListener(
new OnGlobalLayoutListener() {
@SuppressWarnings("deprecation")
@SuppressLint("NewApi")
@Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
getViewTreeObserver().removeGlobalOnLayoutListener(
this);
} else {
getViewTreeObserver().removeOnGlobalLayoutListener(
this);
}
currentPosition = pager.getCurrentItem();
scrollToChild(currentPosition, 0);
}
});
}
private void addTextTab(final int position, String title) {
TextView tab = new TextView(getContext());
tab.setText(title);
tab.setFocusable(true);
tab.setGravity(Gravity.CENTER);
tab.setSingleLine();
tab.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
pager.setCurrentItem(position);
}
});
tabsContainer.addView(tab);
}
private void addIconTab(final int position, int resId) {
ImageButton tab = new ImageButton(getCont
e128
ext());
tab.setFocusable(true);
tab.setImageResource(resId);
tab.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
pager.setCurrentItem(position);
}
});
tabsContainer.addView(tab);
}
private void updateTabStyles() {
for (int i = 0; i < tabCount; i++) {
View v = tabsContainer.getChildAt(i);
v.setLayoutParams(defaultTabLayoutParams);
if (tabBackground != null && currentPosition == i) {
v.setBackgroundDrawable(tabBackground);
}
if (shouldExpand) {
v.setPadding(0, 0, 0, 0);
} else {
v.setPadding(tabPadding, 0, tabPadding, 0);
}
if (v instanceof TextView) {
TextView tab = (TextView) v;
tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize);
tab.setTextColor(i == currentPosition ? tabSelectedTextColor
: tabUnselectedTextColor);
// setAllCaps() is only available from API 14, so the upper case
// is made manually if we are on a
// pre-ICS-build
if (textAllCaps) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
tab.setAllCaps(false);
} else {
tab.setText(tab.getText().toString()
.toLowerCase(locale));
}
}
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (!shouldExpand
|| MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.UNSPECIFIED) {
return;
}
int myWidth = getMeasuredWidth();
int childWidth = 0;
for (int i = 0; i < tabCount; i++) {
childWidth += tabsContainer.getChildAt(i).getMeasuredWidth();
}
if (!checkedTabWidths && childWidth > 0 && myWidth > 0) {
if (childWidth <= myWidth) {
for (int i = 0; i < tabCount; i++) {
tabsContainer.getChildAt(i).setLayoutParams(
expandedTabLayoutParams);
}
}
checkedTabWidths = true;
}
}
private void scrollToChild(int position, int offset) {
if (tabCount == 0) {
return;
}
int newScrollX = tabsContainer.getChildAt(position).getLeft() + offset;
if (position > 0 || offset > 0) {
newScrollX -= scrollOffset;
}
if (newScrollX != lastScrollX) {
lastScrollX = newScrollX;
scrollTo(newScrollX, 0);
}
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (isInEditMode() || tabCount == 0) {
return;
}
final int height = getHeight();
// draw indicator line
rectPaint.setColor(indicatorColor);
// default: line below current tab
View currentTab = tabsContainer.getChildAt(currentPosition);
float lineLeft = currentTab.getLeft();
float lineRight = currentTab.getRight();
// if there is an offset, start interpolating left and right coordinates
// between current and next tab
if (currentPositionOffset > 0f && currentPosition < tabCount - 1) {
View nextTab = tabsContainer.getChildAt(currentPosition + 1);
final float nextTabLeft = nextTab.getLeft();
final float nextTabRight = nextTab.getRight();
lineLeft = (currentPositionOffset * nextTabLeft + (1f - currentPositionOffset)
* lineLeft);
lineRight = (currentPositionOffset * nextTabRight + (1f - currentPositionOffset)
* lineRight);
}
canvas.drawRect(lineLeft, height - indicatorHeight, lineRight, height,
rectPaint);
// draw underline
rectPaint.setColor(underlineColor);
canvas.drawRect(0, height - underlineHeight, tabsContainer.getWidth(),
height, rectPaint);
// draw divider
dividerPaint.setColor(dividerColor);
for (int i = 0; i < tabCount; i++) {
View tab = tabsContainer.getChildAt(i);
if (i != tabCount - 1) {
canvas.drawLine(tab.getRight(), dividerPadding, tab.getRight(),
height - dividerPadding, dividerPaint);
}
if (tab instanceof TextView) {
TextView tv = (TextView) tab;
tv.setTextColor(i == currentPosition ? tabSelectedTextColor
: tabUnselectedTextColor);
}
}
}
private class PageListener implements OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
currentPosition = position;
currentPositionOffset = positionOffset;
scrollToChild(position, (int) (positionOffset * tabsContainer
.getChildAt(position).getWidth()));
invalidate();
if (delegatePageListener != null) {
delegatePageListener.onPageScrolled(position, positionOffset,
positionOffsetPixels);
}
}
@Override
public void onPageScrollStateChanged(int state) {
if (state == ViewPager.SCROLL_STATE_IDLE) {
scrollToChild(pager.getCurrentItem(), 0);
}
if (delegatePageListener != null) {
delegatePageListener.onPageScrollStateChanged(state);
}
}
@Override
public void onPageSelected(int position) {
if (delegatePageListener != null) {
delegatePageListener.onPageSelected(position);
}
}
}
public void setIndicatorColor(int indicatorColor) {
this.indicatorColor = indicatorColor;
invalidate();
}
public void setIndicatorColorResource(int resId) {
this.indicatorColor = getResources().getColor(resId);
invalidate();
}
public int getIndicatorColor() {
return this.indicatorColor;
}
public void setIndicatorHeight(int indicatorLineHeightPx) {
this.indicatorHeight = indicatorLineHeightPx;
invalidate();
}
public int getIndicatorHeight() {
return indicatorHeight;
}
public void setUnderlineColor(int underlineColor) {
this.underlineColor = underlineColor;
invalidate();
}
public void setUnderlineColorResource(int resId) {
this.underlineColor = getResources().getColor(resId);
invalidate();
}
public int getUnderlineColor() {
return underlineColor;
}
public void setDividerColor(int dividerColor) {
this.dividerColor = dividerColor;
invalidate();
}
public void setDividerColorResource(int resId) {
this.dividerColor = getResources().getColor(resId);
invalidate();
}
public int getDividerColor() {
return dividerColor;
}
public void setUnderlineHeight(int underlineHeightPx) {
this.underlineHeight = underlineHeightPx;
invalidate();
}
public int getUnderlineHeight() {
return underlineHeight;
}
public void setDividerPadding(int dividerPaddingPx) {
this.dividerPadding = dividerPaddingPx;
invalidate();
}
public int getDividerPadding() {
return dividerPadding;
}
public void setScrollOffset(int scrollOffsetPx) {
this.scrollOffset = scrollOffsetPx;
invalidate();
}
public int getScrollOffset() {
return scrollOffset;
}
public void setShouldExpand(boolean shouldExpand) {
this.shouldExpand = shouldExpand;
requestLayout();
}
public boolean getShouldExpand() {
return shouldExpand;
}
public boolean isTextAllCaps() {
return textAllCaps;
}
public void setAllCaps(boolean textAllCaps) {
this.textAllCaps = textAllCaps;
}
public void setTextSize(int textSizePx) {
this.tabTextSize = textSizePx;
updateTabStyles();
}
public int getTextSize() {
return tabTextSize;
}
public void setTabPaddingLeftRight(int paddingPx) {
this.tabPadding = paddingPx;
updateTabStyles();
}
public int getTabPaddingLeftRight() {
return tabPadding;
}
@Override
public void onRestoreInstanceState(Parcelable state) {
SavedState savedState = (SavedState) state;
super.onRestoreInstanceState(savedState.getSuperState());
currentPosition = savedState.currentPosition;
requestLayout();
}
@Override
public Parcelable onSaveInstanceState() {
Parcelable superState = super.onSaveInstanceState();
SavedState savedState = new SavedState(superState);
savedState.currentPosition = currentPosition;
return savedState;
}
static class SavedState extends BaseSavedState {
int currentPosition;
public SavedState(Parcelable superState) {
super(superState);
}
private SavedState(Parcel in) {
super(in);
currentPosition = in.readInt();
}
@Override
public void writeToParcel(Parcel dest, int flags) {
super.writeToParcel(dest, flags);
dest.writeInt(currentPosition);
}
public static final Parcelable.Creator<SavedState> CREATOR = new Parcelable.Creator<SavedState>() {
@Override
public SavedState createFromParcel(Parcel in) {
return new SavedState(in);
}
@Override
public SavedState[] newArray(int size) {
return new SavedState[size];
}
};
}
}
在写这个View之前需要我们Values 文件夹中写一个declare-styleable 样式 名字为attrs的xml文件代码如下:
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="ColorProgressBar"> <attr name="progress" format="float" /> <attr name="progressColor" format="color" /> <attr name="progressHeight" format="dimension" /> <attr name="thumb" format="reference" /> <attr name="backgroundProgressColor" format="color" /> <attr name="isVertical" format="boolean" /> </declare-styleable> <!-- viewpager tabs --> <declare-styleable name="PagerSlidingTabStrip"> <attr name="indicatorColor" format="color" /> <attr name="underlineColor" format="color" /> <attr name="dividerColor" format="color" /> <attr name="indicatorHeight" format="dimension" /> <attr name="underlineHeight" format="dimension" /> <attr name="dividerTabPadding" format="dimension" /> <attr name="tabPaddingLeftRight" format="dimension" /> <attr name="scrollOffset" format="dimension" /> <attr name="tabBackground" format="reference|color" /> <attr name="shouldExpand" format="boolean" /> <attr name="textContentAllCaps" format="boolean" /> <attr name="tabTextUnselectedColor" format="color" /> <attr name="tabTextSelectedColor" format="color" /> <attr name="tabTextSize" format="dimension" /> </declare-styleable> </resources>
这样我们的第一个自定义View算是创建好了,接下来第二个比较简单就是一个可以设置不能滑动的ViewPager 代码如下:
import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.MotionEvent; public class NoScrollViewPager extends ViewPager { private boolean noScroll = false; public NoScrollViewPager(Context context, AttributeSet attrs) { super(context, attrs); // TODO Auto-generated constructor stub } public NoScrollViewPager(Context context) { super(context); } public void setNoScroll(boolean noScroll) { this.noScroll = noScroll; } @Override public void scrollTo(int x, int y) { super.scrollTo(x, y); } @Override public boolean onTouchEvent(MotionEvent arg0) { /* return false;//super.onTouchEvent(arg0); */ if (noScroll) return false; else return super.onTouchEvent(arg0); } @Override public boolean onInterceptTouchEvent(MotionEvent arg0) { if (noScroll) return false; else return super.onInterceptTouchEvent(arg0); } @Override public void setCurrentItem(int item, boolean smoothScroll) { super.setCurrentItem(item, smoothScroll); } @Override public void setCurrentItem(int item) { super.setCurrentItem(item); } }
现在我们来看怎么使用 代码如下:
import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.view.View; public class MainActivity extends Activity { private PagerSlidingTabStrip tabs; private NoScrollViewPager viewPager; private ViewAdapter adapter; private List<String> titles = new ArrayList<String>(); private List<View> views = new ArrayList<View>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { //标题按钮 tabs = (PagerSlidingTabStrip) findViewById(R.id.fragment_main_tabs); //自定义ViewPager viewPager = (NoScrollViewPager) findViewById(R.id.record_file_ViewPager); tabs.setShouldExpand(true); titles.add("消息"); titles.add("电话"); //消息布局 views.add(new MessageView(this)); //电话布局 views.add(new PhoneView(this)); //设置不能滑动 viewPager.setNoScroll(true); adapter = new ViewAdapter(views, titles); viewPager.setAdapter(adapter); tabs.setViewPager(viewPager); } }
适配器代码如下:
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
public class ViewAdapter extends PagerAdapter {
private List<View> views;
private List<String> titles;
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
public ViewAdapter(List<View> views, List<String> titles) {
this.views = views;
this.titles = titles;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View v = views.get(position);
container.addView(v);
return v;
}
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
}
大致的代码已经贴出来了,我们可以修改属性和样式来达到我们想要的效果.
相关文章推荐
- Python 2.7.9+ and 3.4+ 安装模块不再需要单独安装 pip ,Python 已经内置了 pip 安装工具
- Spring整合JMS(二)——三种消息监听器
- MFC程序如何使用printf输出调试信息
- 随想1
- 指南针开发
- BZOJ1084 [SCOI2005] 最大子矩阵
- R与自动化报告
- A. Duff and Weight Lifting
- PopupWindow弹窗事件
- 虚拟机在不重启情况下识别新加硬盘
- 由NSObject学到的一点基本知识
- android十大开源项目
- jstl 使用mgt标签将数字转换时间
- 静态全局变量
- SQL_MODE设置之ansi_quotes
- ST股福音:涨停潮开始! 最全ST摘帽股汇总!
- Web API 接口监控
- mysql主从复制
- HDU 5598 GTW likes czf(数位dp)
- session