学习资料:
①:http://www.imooc.com/comment/198 高仿微信5.2.1主界面及消息提醒
实现的效果:
可以左右滑动,而顶部的指示Tab横线跟随滑动,并且颜色改变。
实现消息提醒的效果 BadgeView
②:布局文件,没有新的东西
注意模块化的使用
<include layout="@layout/top" />
注意引入ViewPager控件
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>
当考虑高度时,用 固定的 xdp 来表示,而不是 wrap_content
点9图片,如下情况,使用的是background有效。src无效。易于理解。
<ImageView
android:id="@+id/tabLine"
android:layout_width="50dp"
android:layout_height="5dp"
android:background="@drawable/tabline"
android:layout_gravity="bottom"/>
③:
a. ViewPager的使用
1.找到数据源
2.定义适配器
3.设置监听
一般是 用 Fragment 作为数据源,添加到列表数组中去。然后 实现 继承 FragmentPagerAdapter 的适配器。
代码挺简单,不懂的方法,查看android的文档参考。
底部的指示条是根据ViewPager的回调方法,取得移动的数值,设置 指示条的 的 左边距 leftMargin
其中如何设置控件参数:
LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) tabLine.getLayoutParams();
int left = (int) (arg0*screenSize1_3 + arg1*screenSize1_3);
lp.setMargins(left, 0, 0, 0);
tabLine.setLayoutParams(lp);
b. BadgeView 使用简单,有空要学习它的实现。 https://github.com/stefanjauker/BadgeView
BadgeView bv = new BadgeView(this);
bv.setBadgeCount(9);
<span style="white-space:pre"> </span>//bv.setTargetView(txvChat);<span style="white-space:pre"> </span>//会覆盖TextView上的文字显示
ll_chat.addView(bv);
c.
package com.example.qq_main5_0;
public class MainActivity extends FragmentActivity implements OnClickListener {
private ViewPager viewPager;
private List<Fragment> listViews;
private ImageView tabLine;
private int screenSize1_3;
private static final String TAG = "MainActivity";
private TextView txvChat;
private TextView txvFind;
private TextView txvContact;
private LinearLayout ll_chat;
private LinearLayout ll_find;
private LinearLayout ll_contact;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
initWidget();
initData();
}
private void initData() {
BadgeView bv = new BadgeView(this);
bv.setBadgeCount(9);
ll_chat.addView(bv);
}
private void initWidget() {
ll_chat = (LinearLayout) this.findViewById(R.id.ll_chat);
ll_find = (LinearLayout) this.findViewById(R.id.ll_find);
ll_contact = (LinearLayout) this.findViewById(R.id.ll_contact);
txvChat = (TextView) this.findViewById(R.id.txv_chat);
txvFind = (TextView) this.findViewById(R.id.txv_find);
txvContact = (TextView) this.findViewById(R.id.txv_contact);
ll_chat.setOnClickListener(this);
ll_find.setOnClickListener(this);
ll_contact.setOnClickListener(this);
tabLine = (ImageView) this.findViewById(R.id.tabLine);
Display defaultDisplay = this.getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics();
defaultDisplay.getMetrics(outMetrics);
screenSize1_3 = outMetrics.widthPixels / 3;
LayoutParams layoutParams = tabLine.getLayoutParams();
layoutParams.width = screenSize1_3;
tabLine.setLayoutParams(layoutParams);
viewPager = (ViewPager) this.findViewById(R.id.viewPager);
listViews = new ArrayList<Fragment>();
listViews.add(new ChatFragment());
listViews.add(new FindFragment());
listViews.add(new ContactFragment());
viewPager.setAdapter(new MyAdapter(getSupportFragmentManager() ));
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
Log.e(TAG, "onPageSeleted()" );
Log.e(TAG, "arg0-->"+arg0);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
Log.e(TAG, "onPageScrolled()");
Log.e(TAG, "arg0-->"+arg0);
Log.e(TAG, "arg1-->"+arg1);
Log.e(TAG, "arg2-->"+arg2);
LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) tabLine.getLayoutParams();
int left = (int) (arg0*screenSize1_3 + arg1*screenSize1_3);
lp.setMargins(left, 0, 0, 0);
tabLine.setLayoutParams(lp);
//设置显示当前页文字颜色
reSetCurrentPgColor(arg0 );
}
private void reSetCurrentPgColor(int arg0) {
txvChat.setTextColor(Color.BLACK);
txvFind.setTextColor(Color.BLACK);
txvContact.setTextColor(Color.BLACK);
switch (arg0 ) {
case 0:
txvChat.setTextColor(Color.parseColor("#76B34D")); //深绿色
break;
case 1:
txvFind.setTextColor(Color.parseColor("#76B34D"));
break;
case 2:
txvContact.setTextColor(Color.parseColor("#76B34D"));
break;
default:
break;
}
}
@Override
public void onPageScrollStateChanged(int arg0) {
Log.e(TAG, "onPageScrollStateChanged()");
Log.e(TAG, "arg0-->"+arg0);
}
});
}
private class MyAdapter extends FragmentPagerAdapter {
public MyAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}
@Override
public android.support.v4.app.Fragment getItem(int arg0) {
return listViews.get(arg0);
}
@Override
public int getCount() {
return listViews.size();
}
}
@Override
public void onClick(View v) {
switch(v.getId()) {
case R.id.ll_chat:
scrollPage(0);
break;
case R.id.ll_find:
scrollPage(1);
break;
case R.id.ll_contact:
scrollPage(2);
break;
default:
break;
}
}
private void scrollPage(int position ) {
viewPager.setCurrentItem(position, true);
}
}
d. 源码: