《喜马拉雅FM电台Android客户端开发》-顶部的栏目自定义控
2017-06-01 本文已影响291人
TrillGates
本帖的地址：http://bbs.sunofbeaches.com/thread-6046-1-1.html
版权声明：本文为作者所有，未经作者允许不得转载。
《喜马拉雅FM电台Android客户端开发》-顶部的栏目自定义控件这个控件实现起来不难哈。先看效果吧！
也不知道要不要在这里说明一下是怎么实现的，其实呢，很简单的嘛。自定义控件的第一步，就是要确定要自定义view还是viewGroup，对吧。这里的话，我们需要容纳一个viewpager，所以，我们要做成viewGroup。所以的话，这个view就继承自ViewGroup吧！接着呢，就是把静态的界面画出来咯！最后就是处理事件，这里有两个事件。一个是滑动viewpager的事件，一个是点击tab的事件。处理好两个事件，那么这个控件就出来了嘛！
package com.sunofbeaches.viewpagerindicator.view.custom;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Display;
import android.view.Gravity;
import android.view.View;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.List;
/**
* Create by TrillGates 2017/5/26
*/
@TargetApi(Build.VERSION_CODES.M)
public class IndicatorView extends LinearLayout implements ViewPager.OnPageChangeListener {
private static final String TAG = "Indicator";
private final Context mContext;
private LinearLayout mTabContainer;
private ViewPager mViewPager;
private List<String> mData;
private LinearLayout mLineContainer;
private int mAvgTabWidth;
private View mTabLine;
public IndicatorView(Context context) {
this(context, null);
}
public IndicatorView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public IndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
//设置为垂直布局
setOrientation(VERTICAL);
//添加一个线性布局进来
mTabContainer = new LinearLayout(context);
mTabContainer.setOrientation(HORIZONTAL);
LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
mTabContainer.setLayoutParams(params);
addView(mTabContainer);
mLineContainer = new LinearLayout(mContext);
mLineContainer.setLayoutParams(params);
addView(mLineContainer);
}
private void createTabLine() {
//求出屏幕的宽度，然后求出每一个tag的平均宽度
mAvgTabWidth = (int) (getWinWidth() * 1.0f / mData.size() + 0.5f);
Log.d(TAG, "avgTabWidth == " + mAvgTabWidth);
//
mTabLine = new View(mContext);
LayoutParams mLayoutParams = new LayoutParams(mAvgTabWidth, 5);
mTabLine.setLayoutParams(mLayoutParams);
mTabLine.setBackgroundColor(Color.parseColor("#ff0000"));
//
mLineContainer.addView(mTabLine);
}
public void setData(List<String> tab) {
this.mData = tab;
createTabLine();
//up date data.
createTab();
}
private void createTab() {
mTabContainer.removeAllViews();
for (int i = 0; i < mData.size(); i++) {
final TextView tab = new TextView(mContext);
LayoutParams params = new LayoutParams(0, 80, 1.0f);
tab.setGravity(Gravity.CENTER);
tab.setLayoutParams(params);
tab.setText(mData.get(i));
tab.setTag(i);
if (i == 0) {
tab.setTextColor(Color.parseColor("#ff0000"));
} else {
tab.setTextColor(Color.parseColor("#222222"));
}
//设置点击事件
tab.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mViewPager.setCurrentItem((Integer) tab.getTag());
}
});
//添加进去
mTabContainer.addView(tab);
}
}
@Override
protected void onFinishInflate() {
super.onFinishInflate();
//结束布局以后拿到孩子
View viewPager = getChildAt(2);
if (viewPager instanceof ViewPager) {
mViewPager = (ViewPager) viewPager;
mViewPager.addOnPageChangeListener(this);
}
}
public int getWinWidth() {
WindowManager windowManager = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
Display defaultDisplay = windowManager.getDefaultDisplay();
DisplayMetrics displayMetrics = new DisplayMetrics();
defaultDisplay.getMetrics(displayMetrics);
int widthPixels = displayMetrics.widthPixels;
return widthPixels;
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
int margin = (int) (mAvgTabWidth * position + mAvgTabWidth * positionOffset);
if (mTabLine != null) {
LayoutParams layoutParams = (LayoutParams) mTabLine.getLayoutParams();
layoutParams.leftMargin = margin;
mTabLine.setLayoutParams(layoutParams);
}
}
@Override
public void onPageSelected(int position) {
int childCount = mTabContainer.getChildCount();
for (int i = 0; i < childCount; i++) {
TextView childAt = (TextView) mTabContainer.getChildAt(i);
childAt.setTextColor(Color.parseColor("#222222"));
if (position == i) {
childAt.setTextColor(Color.parseColor("#ff0000"));
}
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
好啦，基本上，我们就完成了这个主的内容界面了。打算呢，接下来就是把首页的轮播图片显示出来先哈！
相关文章:
《喜马拉雅FM电台Android客户端开发》-前期准备
http://bbs.sunofbeaches.com/thread-6041-1-1.html
(出处: 阳光沙滩)
《喜马拉雅FM电台客户端模仿开发》-实现底部的Tab
http://bbs.sunofbeaches.com/thread-6042-1-1.html
(出处: 阳光沙滩)
