ViewPager+RadioGroup仿微信主界面
话不多说，先上图，如图效果，可以点击底部按钮选择页面，也可以滑动页面进行选择。
那么我们下面就来实现一下吧。
首先创建工程WXTest,主界面布局使用ViewPager+RadioGroup来实现,界面代码如下。
<?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="match_parent"
android:orientation="vertical"
>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</android.support.v4.view.ViewPager>
<TextView
android:id="@+id/division_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#333333"
android:layout_above="@+id/rg_contain"
/>
<RadioGroup
android:id="@+id/rg_contain"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:gravity="center"
android:background="#ffffff"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/rb_wx"
style="@style/BottomTabStyle"
android:checked="true"
android:text="微信"
android:drawableTop="@drawable/tab_radiobutton_wx_selector"
android:textColor="@color/txt_tab_selector"
/>
<RadioButton
android:id="@+id/rb_book"
style="@style/BottomTabStyle"
android:checked="true"
android:text="通讯录"
android:drawableTop="@drawable/tab_radiobutton_book_selector"
android:textColor="@color/txt_tab_selector"
/>
<RadioButton
android:id="@+id/rb_discover"
style="@style/BottomTabStyle"
android:checked="true"
android:text="发现"
android:drawableTop="@drawable/tab_radiobutton_discover_selector"
android:textColor="@color/txt_tab_selector"
/>
<RadioButton
android:drawableTop="@drawable/tab_radiobutton_me_selector"
android:id="@+id/rb_me"
style="@style/BottomTabStyle"
android:checked="true"
android:text="我"
android:textColor="@color/txt_tab_selector"
/>
</RadioGroup>
</LinearLayout>
在MainActivity中进行初始化数据
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mRGContain = (RadioGroup) findViewById(R.id.rg_contain);
mRBWX = (RadioButton) findViewById(R.id.rb_wx);
mRBBook = (RadioButton) findViewById(R.id.rb_book);
mRBDiscover = (RadioButton) findViewById(R.id.rb_discover);
mRBMe = (RadioButton) findViewById(R.id.rb_me);
//给图标设置大小
Drawable drawableRbWX = mRBWX.getCompoundDrawables()[1];
drawableRbWX.setBounds(0,0, dp2px(24),dp2px(24));
mRBWX.setCompoundDrawables(null,drawableRbWX,null,null);
Drawable drawableRbBook = mRBBook.getCompoundDrawables()[1];
drawableRbBook.setBounds(0,0, dp2px(24), dp2px(24));
mRBBook.setCompoundDrawables(null,drawableRbBook,null,null);
Drawable drawableRbDiscover = mRBDiscover.getCompoundDrawables()[1];
drawableRbDiscover.setBounds(0,0, dp2px(24), dp2px(24));
mRBDiscover.setCompoundDrawables(null,drawableRbDiscover,null,null);
Drawable drawableRbMe = mRBMe.getCompoundDrawables()[1];
drawableRbMe.setBounds(0,0, dp2px(24), dp2px(24));
mRBMe.setCompoundDrawables(null,drawableRbMe,null,null);
/**
* dp 转 px
* @param dp
* @return
*/
public int dp2px(int dp) {
// 1、获取屏幕密度
float density = getApplicationContext().getResources().getDisplayMetrics().density;
// 2、进行乘法操作
return (int) (dp * density + 0.5);
}
给ViewPager设置数据我们使用FragmentPagerAdapter ,所以MainActivity需要继承FragmentActivity。Fragment选择V4包，可以兼容低版本。
新建BaseFragment继承Fragment,让子类实现initView()方法。
public abstract class BaseFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return initView(inflater,container,savedInstanceState);
}
public abstract View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState);
}
微信界面
public class WXFragment extends BaseFragment {
@Override
public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.wx_fragment, container,false);
return view;
}
}
wx_fragment.xml代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="微信"
android:textSize="15dp"
/>
</LinearLayout>
其余三个界面类似
/**
* 通讯录界面
*/
public class BookFragment extends BaseFragment {
@Override
public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.book_fragment, container,false);
return view;
}
}
/**
* 发现界面
*/
public class DiscoverFragment extends BaseFragment {
@Override
public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.discover_fragment, container,false);
return view;
}
}
/**
* 我界面
*/
public class MeFragment extends BaseFragment {
@Override
public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.me_fragment, container,false);
return view;
}
}
然后使用MainFragmentFactory来存储页面Fragment
package com.example.wxtest.fragment;
import java.util.HashMap;
public class MainFragmentFactory {
private static HashMap<Integer, BaseFragment> mSavedFragment = new HashMap<Integer, BaseFragment>();
//根据position得到对应的fragment
public static BaseFragment getFragment(int position) {
BaseFragment fragment = mSavedFragment.get(position);
if(fragment == null) {
switch (position) {
case 0:
fragment = new WXFragment();
break;
case 1:
fragment = new BookFragment();
break;
case 2:
fragment = new DiscoverFragment();
break;
case 3:
fragment = new MeFragment();
break;
}
//创建之后保存
mSavedFragment.put(position, fragment);
}
return fragment;
}
public static void deleteFragment(){
for (int i = 0 ; i < 4 ; i++){
mSavedFragment.remove(i);
}
}
}
适配器
/**
* 适配器
*/
class MainFragmentAdapter extends FragmentPagerAdapter {
public MainFragmentAdapter(FragmentManager fm) {
super(fm);
}
//根据position的值 返回对应的fragment对象
@Override
public Fragment getItem(int position) {
Fragment fragment = MainFragmentFactory.getFragment(position);
return fragment;
}
//返回ViewPager要显示的item数量
@Override
public int getCount() {
return 4;
}
}
ViewPager设置数据
//给ViewPager设置数据 mViewPager.setAdapter(new MainFragmentAdapter(getSupportFragmentManager()));
ViewPager页面选中监听
//界面改变监听
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//当前选中页面
@Override
public void onPageSelected(int position) {
switch (position){
case 0:
mRGContain.check(R.id.rb_wx);
break;
case 1:
mRGContain.check(R.id.rb_book);
break;
case 2:
mRGContain.check(R.id.rb_discover);
break;
case 3:
mRGContain.check(R.id.rb_me);
break;
default:
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
RadioGroup选中监听
//RadioGroup选中监听
mRGContain.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId){
case R.id.rb_wx: //微信
mViewPager.setCurrentItem(0,false);
break;
case R.id.rb_book: //通讯录
mViewPager.setCurrentItem(1,false);
break;
case R.id.rb_discover: //发现
mViewPager.setCurrentItem(2,false);
break;
case R.id.rb_me: //我
mViewPager.setCurrentItem(3,false);
break;
default:
break;
}
}
});
//选中微信界面
mRGContain.check(R.id.rb_wx);
然后运行程序，就可以实现图中的效果了！
源码：下载地址
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- Android UI设计与开发之ViewPager仿微信引导界面以及动画效果
- ViewPager 与 Fragment相结合实现微信界面实例代码
- 使用ViewPage+Fragment仿微信界面
相关推荐
-
Android UI设计与开发之ViewPager仿微信引导界面以及动画效果
基于前两篇比较简单的实例做铺垫之后,这一篇我们来实现一个稍微复杂一点的引导界面的效果,当然也只是稍微复杂了一点,对于会的人来说当然还是so easy!正所谓会者不难,难者不会,大概说的就是这个意思了吧.好的,话不多说,回归正题. 这篇要实现的是一个仿微信的动画效果,虽然这种效果的实现在网上到处都有,但是我还是想站在中低端开发者的角度去告诉大家是如何实现的,当然实现的方式有很多,我也只是列出了我认为实现起来比较方便的一种方法,希望大家能够受用. 一.实现的效果图 有图才有真相,上图先: 点击按钮后
-
ViewPager 与 Fragment相结合实现微信界面实例代码
在如今的互联网时代,微信已是一个超级App.这篇通过ViewPager + Fragment实现一个类似于微信的界面,之前有用FragmentTabHost实现过类似界面,ViewPager的实现方式相对于FragmentTabHost的方式更简单明了. ViewPager: ViewPager继承自ViewGroup,是一个容器类,可以往里添加View. ViewPager的使用很简单,通过setAdapter()方法设置一个PagerAdapter即可,这个PagerAdapter需要自己写
-
使用ViewPage+Fragment仿微信界面
本文实例为大家分享了ViewPage+Fragment仿微信界面的具体代码,供大家参考,具体内容如下 实现效果: 左右滑动可切换界面,点击也可以实现 界面与碎片: 主界面: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="h
-
ViewPager+RadioGroup仿微信主界面
话不多说,先上图,如图效果,可以点击底部按钮选择页面,也可以滑动页面进行选择. 那么我们下面就来实现一下吧. 首先创建工程WXTest,主界面布局使用ViewPager+RadioGroup来实现,界面代码如下. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quo
-
Android仿微信主界面的实现方法
本文实例为大家分享了Android模仿微信主界面展示的具体代码,供大家参考,具体内容如下 先看一下效果图 实现的原理: ViewPager+FragmentPagerAdapter 主界面可分为三部分: top标题栏就是一个TextView 中间的ViewPager作为显示的容器,填充Fragment bottom是一个RadioGroup 这里为了布局的优化,将top和bottom抽取出来 ,然后用include将其导入主布局,如下 <LinearLayout xmlns:android=&quo
-
Android用ActionBar高仿微信主界面的实例代码
经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Android ActionBar完全解析使用官方推荐的最佳导航栏(上)和 Android ActionBar完全解析使用官方推荐的最佳导航
-
Android仿微信主界面设计
先来一张效果图 一.ActionBar的设计 首先是main.xml,先定义这些菜单,界面稍后在调整 <menu xmlns:android="http://schemas.android.com/apk/res/android" tools:context=".MainActivity"> <item android:id="@+id/action_search" android:actionViewClass="a
-
Android高仿微信聊天界面代码分享
微信聊天现在非常火,是因其界面漂亮吗,哈哈,也许吧.微信每条消息都带有一个气泡,非常迷人,看起来感觉实现起来非常难,其实并不难.下面小编给大家分享实现代码. 先给大家展示下实现效果图: OK,下面我们来看一下整个小项目的主体结构: 下面是Activity的代码: package com.way.demo; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import jav
-
react+redux仿微信聊天界面
一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的手机端仿微信界面聊天室--reactChatRoom,实现了聊天记录下拉刷新.发送消息.表情(动图),图片.视频预览,打赏.红包等功能. 二.技术栈MVVM框架: react / react-dom状态管理:redux / react-redux页面路由:react-router-dom弹窗插件
-
iOS高仿微信相册界面翻转过渡动画效果
点开微信相册的时候,想要在相册图片界面跳转查看点赞和评论时,微信会采用界面翻转的过渡动画来跳转到评论界面,好像是在图片界面的背面一样,点击完成又会翻转回到图片界面,这不同于一般的导航界面滑动动画,觉得很有意思,于是自己学着做了一下,其实也很简单,下面是实现的类似的效果图: 在图片界面点击右下角的查看评论会翻转到评论界面,评论界面点击左上角的返回按钮会反方向翻转回图片界面,真正的实现方法,与传统的导航栏过渡其实只有一行代码的区别,让我们来看看整体的实现. 首先我们实现图片界面,这个界面上有黑色的背
-
android 中viewpager+fragment仿微信底部TAG完美渐变
viewpager+fragment仿微信底部TAG完美渐变,在图片渐变的同时字的颜色也在变,注意,是渐变哦! 效果图: activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="http://schemas.android.com/apk/res/com.Sing.weixin" xmlns:tools="
-
详解微信小程序实现仿微信聊天界面(各种细节处理)
本文介绍了微信小程序实现仿微信聊天界面,分享给大家,具体如下: 下面先来看看效果 为实现这样的效果,首先要解决两个问题: 1.点击输入框弹出软键盘后,将已有的少许聊天内容弹出,导致看不到的问题: 2.键盘弹出或收起时,聊天消息没有自动滚到最底部. 首先解决第二个问题,自动滚动到最底部,这很简单,这里提供三种方法(推荐第三种): 1.计算每条消息的最大高度,设置scroll-top=(单条msg最大高度 * msg条数)px. 2.用 将展示msg的目标scroll-view包裹, 通过js获取到
-
Flutter 仿微信支付界面
左侧是微信支付的界面,右侧是开发完成后的效果,图标是从 iconfont 上下载的.首先介绍一下本篇涉及到的组件. 带装饰效果的 Container 实际过程中我们经常会遇到一个容器需要额外的样式,例如圆角,背景色等.在 Flutter 中,对于各种容器都有一个 decoration 的属性,可以用于装饰容器.典型的用法有设置背景色.圆角.边框和阴影等,其中背景色可以使用渐变色.decoration 是一个 Decoration 对象,最常用的是 BoxDecoration,BoxDecorat