主界面 主要使用ViewPager + Fragment 实现 界面的滑动
消息提示主要使用了github 的开源控件 https://github.com/stefanjauker/BadgeView
1.实现 TopBar 布局
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="40dp" android:paddingLeft="15dp" android:paddingRight="15dp" android:background="#000000" > <LinearLayout android:layout_alignParentLeft="true" android:gravity="center" android:layout_centerVertical="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/actionbar_icon"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:layout_marginLeft="5dp" android:textColor="#FFFAF0" android:textSize="15dp"/> </LinearLayout> <LinearLayout android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:layout_centerVertical="true" android:orientation="horizontal"> <ImageView android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/actionbar_search_icon"/> <ImageView android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/actionbar_add_icon"/> <ImageView android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/actionbar_more_icon"/> </LinearLayout> </RelativeLayout>
2.实现选项卡布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="40dp" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="37dp" android:orientation="horizontal" > <LinearLayout android:id="@+id/ll_chat" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:orientation="horizontal" > <TextView android:id="@+id/tv_chat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="聊天" android:textColor="#FFF68F" android:textSize="15sp" /> </LinearLayout> <LinearLayout android:id="@+id/ll_find" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:orientation="horizontal" > <TextView android:id="@+id/tv_find" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="发现" android:textColor="#000000" android:textSize="15sp" /> </LinearLayout> <LinearLayout android:id="@+id/ll_contact" android:layout_height="match_parent" android:layout_width="0dp" android:layout_weight="1" android:gravity="center" android:orientation="horizontal" > <TextView android:id="@+id/tv_contact" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="通信录" android:textColor="#000000" android:textSize="15dp" /> </LinearLayout> </LinearLayout> <ImageView android:id="@+id/tabline_contact" android:layout_width="150dp" android:layout_height="match_parent" android:background="@drawable/abc_ab_transparent_light_holo" /> </LinearLayout>
3.将 TopBar 选项卡 插入到主布局中,使用ViewPager实现滑动效果
<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="match_parent" android:orientation="vertical" > <include layout="@layout/topbar" /> <include layout="@layout/optionbar" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>
4.分别实现 三个Fragment 的布局,这里只实现一个,其它几个类似 contact_fragment.xml
<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="match_parent" android:orientation="vertical" android:gravity="center" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="20sp" android:text="this is chat fragment"/> </LinearLayout>
5.继承 Fragment 将布局文件填充到Fragment中去
package com.example.weixinui; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class ContactFragment extends Fragment{ @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.contact_fragment, container, false); } }
6.实现MainActivity 的业务逻辑
package com.example.weixinui; import java.util.ArrayList; import java.util.List; import com.jauker.widget.BadgeView; import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.view.Window; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.LinearLayout.LayoutParams; import android.widget.TextView; public class MainActivity extends FragmentActivity { private ViewPager mViewPager; private List<Fragment> mData; private FragmentPagerAdapter mAdapter; private TextView mChatTextView,mFindTextView,mContactTextView; private LinearLayout mChatLinearLayout,mFindLinearLayout,mContactLinearLayout; private BadgeView mChatBadgeView,mFindBadgeView,mContactBadgeView; private ImageView mTabLine; private int screenWidth; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.main); initView(); initTabLine(); } //初始化控件 private void initView() { mChatTextView = (TextView) findViewById(R.id.tv_chat); mFindTextView = (TextView) findViewById(R.id.tv_find); mContactTextView = (TextView) findViewById(R.id.tv_contact); mChatLinearLayout = (LinearLayout) findViewById(R.id.ll_chat); mFindLinearLayout = (LinearLayout) findViewById(R.id.ll_find); mContactLinearLayout = (LinearLayout) findViewById(R.id.ll_contact); mViewPager = (ViewPager) findViewById(R.id.viewpager); mData = new ArrayList<Fragment>(); ChatFragment mChatFragment = new ChatFragment(); ContactFragment mContactFragment = new ContactFragment(); FindFragment mFindFragment = new FindFragment(); mChatBadgeView = new BadgeView(this); mFindBadgeView = new BadgeView(this); mContactBadgeView = new BadgeView(this); mData.add(mChatFragment); mData.add(mContactFragment); mData.add(mFindFragment); mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { return mData.size(); } @Override public Fragment getItem(int arg0) { return mData.get(arg0); } }; mViewPager.setAdapter(mAdapter); mViewPager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int position) { resetTextView(); switch (position) { case 0: updateChatLinearLayout(); break; case 1: updateFindLinearLayout(); break; case 2: updateContactLinearLayout(); break; default: break; } } @Override public void onPageScrolled(int pos, float posOffset, int posOffsetPex) { LinearLayout.LayoutParams lp = (LayoutParams)mTabLine.getLayoutParams(); lp.leftMargin = (int) ((pos+posOffset) * screenWidth); mTabLine.setLayoutParams(lp); } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); } //重置显示文本的颜色 private void resetTextView(){ mChatTextView.setTextColor(Color.BLACK); mFindTextView.setTextColor(Color.BLACK); mContactTextView.setTextColor(Color.BLACK); } //重置BadgeView 显示位置 private void resetBadgeView(){ mChatLinearLayout.removeView(mChatBadgeView); mFindLinearLayout.removeView(mFindBadgeView); mContactLinearLayout.removeView(mContactBadgeView); } private void updateChatLinearLayout() { resetBadgeView(); mChatBadgeView.setBadgeCount(5); mChatLinearLayout.addView(mChatBadgeView); mChatTextView.setTextColor(Color.BLUE); } private void updateFindLinearLayout() { resetBadgeView(); mFindBadgeView.setBadgeCount(5); mFindLinearLayout.addView(mFindBadgeView); mFindTextView.setTextColor(Color.BLUE); } private void updateContactLinearLayout() { resetBadgeView(); mContactBadgeView = new BadgeView(MainActivity.this); mContactBadgeView.setBadgeCount(5); mContactLinearLayout.addView(mContactBadgeView); mContactTextView.setTextColor(Color.BLUE); } //根据屏幕的宽度,初始化引导线的宽度 private void initTabLine() { mTabLine = (ImageView) findViewById(R.id.tabline_contact); DisplayMetrics displayMetrics = new DisplayMetrics(); getWindow().getWindowManager().getDefaultDisplay().getMetrics(displayMetrics); screenWidth = displayMetrics.widthPixels; LinearLayout.LayoutParams lp = (LayoutParams) mTabLine.getLayoutParams(); lp.width = screenWidth / 3; mTabLine.setLayoutParams(lp); } }
效果图:
相关推荐
Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)Android ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)
使用ViewPager+Fragment+RadioGroup实现类似微信主界面
Android ViewPager+RadioGroup+Fragment超高仿微信主界面底部滑动、点击菜单
AS写的ViewPager+Fragment超高仿微信主界面(带底部图标切换动画)demo blog:http://blog.csdn.net/shenyuanqing/article/details/49464767
ViewPager+RadioGroup+Fragment超高仿微信主界面,可通过左右滑动或点击底部RadioButton切换Fragment http://blog.csdn.net/shenyuanqing/article/details/46670761 开发环境AndroidStudio1.2
浅析TextView,通过TextView+Fragment+ViewPager实现微信主界面,通过EditText实现简单的登录界面
跟着翔哥后面敲得,自己加了头部点击。喜欢就下下看看吧
高仿微信5.2.1主界面及消息提醒(fragment+viewPager+BadgeView)
很长一段时间没有上传资源了,最近觉得微信的主界面滑动很好用,研究了下,秉着开源精神,这里把资源公布出来,供大家免费下载。 主要有 TabHost + Fragment 来实现。 当然,另一种实现方式是 ViewGroup + ViewPager...
首先创建工程WXTest,主界面布局使用ViewPager+RadioGroup来实现,界面代码如下。 <?xml version=1.0 encoding=utf-8?> <LinearLayout xmlns:android=http://schemas.android.com/apk/res/android xmlns:...
使用android studio设计微信主界面,采用ViewPager和Fragment相结合的方法,实现界面滑动更换页面,点击等
高仿微信6.0主界面 1.使用viewpager+fragment 编写 主界面的 tab bar; 2.自定义 OverflowButton 修改button 图标; 3.修改 tab 图标颜色 切换; 4.解决内存 杀去导致 图标和view 不一致;
使用ViewPager加Fragment实现微信6.0版本主界面功能
通过ViewPager和Fragment组合使用,实现了微信主界面的滑动效果,以及RadioGroup相对应Fragment的操作
用fragment+viewpager技术高仿微信5.2.1主界面
在使用ViewPager + Fragment 的时候报错:The specified child already has a parent. You must call removeView() on the child’s parent first
本文实例为大家分享了Android模仿微信主界面展示的具体代码,供大家参考,具体内容如下 先看一下效果图 实现的原理: ViewPager+FragmentPagerAdapter 主界面可分为三部分: top标题栏就是一个TextView 中间的...
Android 仿微信Tab界面设计范例源码 Tab主界面制作范例,里面有2个例子,都是仿的微信,基于 Fragment TabPageIndicator ViewPager。微信的主界面滑动其实就是使用TAB的效果,每滑动一下,就会改变TAB的一个界面,很...
简单仿微信5.4界面,使用Fragment+ViewPager实现
##高仿微信主界面1,Fragment+viewpager+fragmentPagerAdapter 2,徽章查看3,界面切换时,演示画面 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPx) { Log.v(...