最近做一个小项目,需要用到顶部导航,现在大部分的一些顶部导航都差不多是横线加文字的模式设计的,这样简单也比较的方便,在动态设置横线的问题遇到一些问题,如开始用到的是setX,但是效果不怎样,最终通过设置 LinearLayout.LayoutParams完成动态横线的切换,先上图:
采用ViewPager实现多页显示,MainActivity继承FragmentActivity,通过设置适配器完成相应的页面显示,如下面的程序所示。
布局文件为:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
>
<include layout="@layout/activity_main_top_tab"/>
<android.support.v4.view.ViewPager
android:id="@+id/id_page_vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
activity_main_top_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/id_switch_tab_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/id_tab_chat_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dip"
android:saveEnabled="false" >
<TextView
android:id="@+id/id_chat_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="动态"
android:textColor="#ff8c8c8c"
android:textSize="16dp"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_friend_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:clickable="true"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dip"
android:saveEnabled="false"
>
<TextView
android:id="@+id/id_friend_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="附近"
android:textColor="#ff8c8c8c"
android:textSize="16dp" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_contacts_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dip" >
<TextView
android:id="@+id/id_contacts_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="广场"
android:textColor="#ff8c8c8c"
android:textSize="16dp"/>
</LinearLayout>
</LinearLayout>
<ImageView
android:id="@+id/id_tab_line_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/slidingcursor"
/>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#ff8c8c8c" />
</LinearLayout>
java源代码为:
MainActivity.class源代码:
package com.example.test;
import java.util.ArrayList;
import java.util.List;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends FragmentActivity {
private List<Fragment> mFragmentList = new ArrayList<Fragment>();
private FragmentAdapter mFragmentAdapter;
private ViewPager mPageVp;
/**
* Tab显示内容TextView
*/
private TextView mTabChatTv, mTabContactsTv, mTabFriendTv;
/**
* Tab的那个引导线
*/
private ImageView mTabLineIv;
/**
* Fragment
*/
private FragmentPage1 mChatFg;
private FragmentPage2 mFriendFg;
private FragmentPage3 mContactsFg;
/**
* ViewPager的当前选中页
*/
private int currentIndex;
/**
* 屏幕的宽度
*/
private int screenWidth;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findById();
init();
initTabLineWidth();
}
private void findById() {
mTabContactsTv = (TextView) this.findViewById(R.id.id_contacts_tv);
mTabChatTv = (TextView) this.findViewById(R.id.id_chat_tv);
mTabFriendTv = (TextView) this.findViewById(R.id.id_friend_tv);
mTabLineIv = (ImageView) this.findViewById(R.id.id_tab_line_iv);
mPageVp = (ViewPager) this.findViewById(R.id.id_page_vp);
}
@SuppressWarnings("deprecation")
private void init() {
mFriendFg = new FragmentPage2();
mContactsFg = new FragmentPage3();
mChatFg = new FragmentPage1();
mFragmentList.add(mChatFg);
mFragmentList.add(mFriendFg);
mFragmentList.add(mContactsFg);
mFragmentAdapter = new FragmentAdapter(
this.getSupportFragmentManager(), mFragmentList);
mPageVp.setAdapter(mFragmentAdapter);
mPageVp.setCurrentItem(0);
mPageVp.setOnPageChangeListener(new OnPageChangeListener() {
/**
* state滑动中的状态 有三种状态(0,1,2) 1:正在滑动 2:滑动完毕 0:什么都没做。
*/
@Override
public void onPageScrollStateChanged(int state) {
}
/**
* position :当前页面,及你点击滑动的页面 offset:当前页面偏移的百分比
* offsetPixels:当前页面偏移的像素位置
*/
@Override
public void onPageScrolled(int position, float offset,
int offsetPixels) {
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv.getLayoutParams();
lp.leftMargin = screenWidth/3*position+offsetPixels/3;
mTabLineIv.setLayoutParams(lp);
}
@Override
public void onPageSelected(int position) {
resetTextView();
switch (position) {
case 0:
mTabChatTv.setTextColor(Color.BLUE);
break;
case 1:
mTabFriendTv.setTextColor(Color.BLUE);
break;
case 2:
mTabContactsTv.setTextColor(Color.BLUE);
break;
}
currentIndex = position;
}
});
}
/**
* 设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定)
*/
private void initTabLineWidth() {
DisplayMetrics dpMetrics = new DisplayMetrics();
getWindow().getWindowManager().getDefaultDisplay()
.getMetrics(dpMetrics);
screenWidth = dpMetrics.widthPixels;
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv.getLayoutParams();
lp.width = screenWidth / 3;
mTabLineIv.setLayoutParams(lp);
}
/**
* 重置颜色
*/
private void resetTextView() {
mTabChatTv.setTextColor(0xff8c8c8c);
mTabFriendTv.setTextColor(0xff8c8c8c);
mTabContactsTv.setTextColor(0xff8c8c8c);
}
}
源码下载地址