网友通过本文主要向大家介绍了android uc浏览器,android 仿uc浏览器,uc android,android 仿uc首页,android 仿uc等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
android 打造炫酷导航栏（仿UC头条）
年后开始上班甚是清闲，所以想捣鼓一些东西。在翻阅大神杰作Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI的时候看到下面有一条评论说，如果导航栏能滑动就更好了。我就想我可以去改一下就可以。然后又想感觉有点像UC的头条的界面。于是就往里面加东西，调试写代码。弄了两天有点效果了，写出来看看了。
项目下载地址：http://download.csdn.net/detail/qq_16064871/9434291
1、先看效果
用咔咔大师录屏的gif效果，有点失真。
这是第一个版本的效果。因为我不断往里面加东西，所以有几个版本了。
2、这个版本基本代码
实现思路就是自定义绘制了。主要有两层，第一层是ViewPagerIndicator。主要负责导航栏的三角形指示器的绘制，以及页面滑动的回调，控制。当然这里需要android.support.v4.view.ViewPager这东西配合使用。
第二层是，导航栏的滑动效果，以及最左、最右有 反弹的效果。这个效果我是从以前一篇博文改动到了这里来。链接：android 滚动条下拉反弹的效果（类似微信朋友圈）。这里效果是垂直，改为横向就行了。还有这两层同时使用需要处理就是滑动不要冲突就可以了。
xml布局代码：
<com.ucnew.view.bouncescrollview android:id="@+id/id_scrollview" android:layout_width="0dp" android:layout_height="45dp" android:layout_weight="1" android:focusableintouchmode="false" android:scrollbars="none">
<com.ucnew.view.viewpagerindicator android:id="@+id/id_indicator" android:layout_width="match_parent" android:layout_height="45dp" android:orientation="horizontal" mmsx:item_count="4">
</com.ucnew.view.viewpagerindicator>
</com.ucnew.view.bouncescrollview>
3、自定义view的java代码
ViewPagerIndicator
package com.ucnew.view;
import java.util.List;
import com.ucnew.activity.R;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.CornerPathEffect;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
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.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;
public class ViewPagerIndicator extends LinearLayout
{
//绘制三角形的画笔
private Paint mPaint;
//path构成一个三角形
private Path mPath;
//三角形的宽度
private int mTriangleWidth;
// 三角形的高度
private int mTriangleHeight;
//三角形的宽度为单个Tab的1/6
private static final float RADIO_TRIANGEL = 1.0f / 6;
// 三角形的最大宽度
private final int DIMENSION_TRIANGEL_WIDTH = (int) (getScreenWidth() / 3 * RADIO_TRIANGEL);
//初始时，三角形指示器的偏移量
private int mInitTranslationX;
// 手指滑动时的偏移量
private float mTranslationX;
// tab数量
private int mTabVisibleCount;
// tab上的内容
private List mTabTitles;
// 与之绑定的ViewPager
public ViewPager mViewPager;
// 标题正常时的颜色
private static final int COLOR_TEXT_NORMAL = 0x77FFFFFF;
//标题选中时的颜色
private static final int COLOR_TEXT_HIGHLIGHTCOLOR = 0xFFFFFFFF;
public ViewPagerIndicator(Context context)
{
this(context, null);
}
public ViewPagerIndicator(Context context, AttributeSet attrs)
{
super(context, attrs);
// 获得自定义属性，tab的数量
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.ViewPagerIndicator);
mTabVisibleCount = a.getInt(R.styleable.ViewPagerIndicator_item_count,4);
if (mTabVisibleCount < 0)
mTabVisibleCount = 4;
a.recycle();
// 初始化画笔
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setColor(Color.parseColor("#ffffffff"));
mPaint.setStyle(Style.FILL);
mPaint.setPathEffect(new CornerPathEffect(3));
}
//绘制指示器
@Override
protected void dispatchDraw(Canvas canvas)
{
canvas.save();
// 画笔平移到正确的位置
canvas.translate(mInitTranslationX + mTranslationX, getHeight() + 1);
canvas.drawPath(mPath, mPaint);
canvas.restore();
super.dispatchDraw(canvas);
}
//初始化三角形的宽度
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
super.onSizeChanged(w, h, oldw, oldh);
mTriangleWidth = (int) (w / mTabVisibleCount * RADIO_TRIANGEL);// 1/6 of
// width
mTriangleWidth = Math.min(DIMENSION_TRIANGEL_WIDTH, mTriangleWidth);
// 初始化三角形
initTriangle();
// 初始时的偏移量
mInitTranslationX = getScreenWidth() / mTabVisibleCount / 2 - mTriangleWidth / 2;
}
//设置可见的tab的数量
public void setVisibleTabCount(int count)
{
this.mTabVisibleCount = count;
}
//设置tab的标题内容 可选，生成textview加入布局，灵活处理
public void setTabItemTitles(List datas)
{
// 如果传入的list有值，则移除布局文件中设置的view
if (datas != null && datas.size() > 0)
{
this.removeAllViews();
this.mTabTitles = datas;
for (String title : mTabTitles)
{
// 添加view
addView(generateTextView(title));
}
// 设置item的click事件
setItemClickEvent();
}
}
//根据标题生成我们的TextView
private TextView generateTextView(String text)
{
TextView tv = new TextView(getContext());
LinearLayout.LayoutParams lp = new LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
lp.width = getScreenWidth() / mTabVisibleCount;
tv.setGravity(Gravity.CENTER);
tv.setTextColor(COLOR_TEXT_NORMAL);
tv.setText(text);
tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
tv.setLayoutParams(lp);
return tv;
}
//对外的ViewPager的回调接口
public interface PageChangeListener
{
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels);
public void onPageSelected(int position);
public void onPageScrollStateChanged(int state);
}
// 对外的ViewPager的回调接口
private PageChangeListener onPageChangeListener;
// 对外的ViewPager的回调接口的设置
public void setOnPageChangeListener(PageChangeListener pageChangeListener)
{
this.onPageChangeListener = pageChangeListener;
}
// 设置关联的ViewPager,以及传入 BounceScrollView，进行设置滚动
public void setViewPager(ViewPager mViewPager, final BounceScrollView scrollView, int pos)
{
this.mViewPager = mViewPager;
mViewPager.setOnPageChangeListener(new OnPageChangeListener()
{
@Override
public void onPageSelected(int position)
{
// 设置字体颜色高亮
resetTextViewColor();
highLightTextView(position);
// 回调
if (onPageChangeListener != null)
{
onPageChangeListener.onPageSelected(position);
}
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels)
{
// 滚动
scroll(scrollView,position, positionOffset);
// 回调
if (onPageChangeListener != null)
{
onPageChangeListener.onPageScrolled(position,
positionOffset, positionOffsetPixels);
}
}
@Override
public void onPageScrollStateChanged(int state)
{
// 回调
if (onPageChangeListener != null)
{
onPageChangeListener.onPageScrollStateChanged(state);
}
}
});
// 设置当前页
mViewPager.setCurrentItem(pos);
// 高亮
highLightTextView(pos);
}
//高亮文本
protected void highLightTextView(int position)
{
View view = getChildAt(position);
if (view instanceof TextView)
{
((TextView) view).setTextColor(COLOR_TEXT_HIGHLIGHTCOLOR);
}
}
//重置文本颜色
private void resetTextViewColor()
{
for (int i = 0; i < getChildCount(); i++)
{
View view = getChildAt(i);
if (view instanceof TextView)
{
((TextView) vie