Android仿微信之界面导航篇(1)

微信是现在比较流行的应用了,在各大安卓市场几乎都是名列前茅了。

说实话不得不羡慕腾讯庞大的用户群体,只要腾讯敢做,就会有很多人去用。

废话不多说,下面就开始说一下如何实现微信的第一次启动程序的用户导航,ViewPager相信大家都不陌生了,是google放出的一个安卓低版本的兼容包android-support-v4.jar,里面有很多类我们可以去使用。那这个导航就是使用这个类来辅助完成的,在每一个View里放置一个图片,当我们使用ViewPager滑动界面的时候,就会看到一张张图片,从而实现这个效果,我们来看一下官方的:

其实使用过微信的用户都知道,每次启动程序都会有这个启动画面,如果是第一次使用当然还会出现后面的导航界面。下面以第一次使用为例,来说明如何实现。当启动出现进入第一个Activity,其实就是那个启动画面,有地球那个,之后会在这个Activity里面设置一个Handler去延迟(1秒,数值可以自己设定)执行启动导航界面的Activity,代码如下:

import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.content.Intent;
import android.view.Window;
import android.view.WindowManager; 

public class Appstart extends Activity{ 

 /*
 * 2012.11.1
 * @author:wangjinyu501
 * 这个Activiyt是程序启动画面,也就是一个图片。在这个Activity里使用了Handler一秒后会进入到引导Activity里面。
 */
 @Override
 public void onCreate(Bundle savedInstanceState) { 

 super.onCreate(savedInstanceState);
 requestWindowFeature(Window.FEATURE_NO_TITLE);//去掉标题栏,注意一定要在绘制view之前调用这个方法,不然会出现
 //AndroidRuntimeException: requestFeature() must be called before adding content 这个错误。
 setContentView(R.layout.appstart);
 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN); //全屏显示 

 new Handler().postDelayed(new Runnable(){
 public void run(){
 Intent intent = new Intent (Appstart.this,Viewpager.class);
 startActivity(intent);
 this.finish();//结束本Activity
 }
 }, 1000);
 }
}

之后就进入前面说的导航页面了,其实就是多个View,每一个View就是一张图片,非常简单,而且就是基于ViewPager实现的,唯一有一些难度的就是当我们滑动图片的时候,下面那些移动的小圆点会随着改变。这种效果在其他程序的导航界面中也是很常见的。代码如下:

import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTitleStrip;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView; 

public class Viewpager extends Activity { 

 private ViewPager mViewPager;//声明ViewPager对象
 private PagerTitleStrip mPagerTitleStrip;//声明动画标题
 private ImageView mPageImg;// 动画图片
 private int currIndex = 0;//当前页面
 private ImageView mPage0,mPage1,mPage2,mPage3,mPage4,mPage5,mPage6,mPage7,mPage8;//声明导航图片对象 

 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.viewpager);
 mViewPager = (ViewPager)findViewById(R.id.viewpager);
 mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
 mPagerTitleStrip = (PagerTitleStrip)findViewById(R.id.pagertitle); 

 mPage0 = (ImageView)findViewById(R.id.page0);
 mPage1 = (ImageView)findViewById(R.id.page1);
 mPage2 = (ImageView)findViewById(R.id.page2);
 mPage3 = (ImageView)findViewById(R.id.page3);
 mPage4 = (ImageView)findViewById(R.id.page4);
 mPage5 = (ImageView)findViewById(R.id.page5);
 mPage6 = (ImageView)findViewById(R.id.page6);
 mPage7 = (ImageView)findViewById(R.id.page7);
 mPage8 = (ImageView)findViewById(R.id.page8); 

 //将要分页显示的View装入数组中
 LayoutInflater mLi = LayoutInflater.from(this);
 View view1 = mLi.inflate(R.layout.view1, null);
 View view2 = mLi.inflate(R.layout.view2, null);
 View view3 = mLi.inflate(R.layout.view3, null);
 View view4 = mLi.inflate(R.layout.view4, null);
 View view5 = mLi.inflate(R.layout.view5, null);
 View view6 = mLi.inflate(R.layout.view6, null);
 View view7 = mLi.inflate(R.layout.view7, null);
 View view8 = mLi.inflate(R.layout.view8, null);
 View view9 = mLi.inflate(R.layout.view9, null); 

 //每个页面的view数据
 final ArrayList<View> views = new ArrayList<View>();
 views.add(view1);
 views.add(view2);
 views.add(view3);
 views.add(view4);
 views.add(view5);
 views.add(view6);
 views.add(view7);
 views.add(view8);
 views.add(view9);
 //每一个也没得标题
 final ArrayList<String> titles = new ArrayList<String>();
 titles.add("①");
 titles.add("②");
 titles.add("③");
 titles.add("④");
 titles.add("⑤");
 titles.add("⑥");
 titles.add("⑦");
 titles.add("⑧");
 titles.add("⑨"); 

 //填充ViewPager的数据适配器,我们重写即可
 PagerAdapter mPagerAdapter = new PagerAdapter() { 

 @Override
 public boolean isViewFromObject(View arg0, Object arg1) {
 return arg0 == arg1;
 } 

 @Override
 public int getCount() {
 return views.size();
 } 

 @Override
 public void destroyItem(View container, int position, Object object) {
 ((ViewPager)container).removeView(views.get(position));
 } 

 @Override
 public CharSequence getPageTitle(int position) {
 return titles.get(position);
 } 

 @Override
 public Object instantiateItem(View container, int position) {
 ((ViewPager)container).addView(views.get(position));
 return views.get(position);
 }
 }; 

 mViewPager.setAdapter(mPagerAdapter);//与ListView用法相同,设置重写的Adapter。这样就实现了ViewPager的滑动效果。
 } 

 public class MyOnPageChangeListener implements OnPageChangeListener { 

 public void onPageSelected(int arg0) {//参数arg0为选中的View 

 Animation animation = null;//声明动画对象
 switch (arg0) {
 case 0: //页面一
 mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page_now));//进入第一个导航页面,小圆点为选中状态,下一个页面的小圆点是未选中状态。
 mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));
 if (currIndex == arg0+1) {
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0);//圆点移动效果动画,从当前View移动到下一个View
 }
 break;
 case 1: //页面二
 mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page_now));//当前View
 mPage0.setImageDrawable(getResources().getDrawable(R.drawable.page));//上一个View
 mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));//下一个View
 if (currIndex == arg0-1) {//如果滑动到上一个View
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0); //圆点移动效果动画,从当前View移动到下一个View 

 } else if (currIndex == arg0+1) {//圆点移动效果动画,从当前View移动到下一个View,下同。 

  animation = new TranslateAnimation(arg0+1, arg0, 0, 0);
 }
 break;
 case 2: //页面三
 mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
 mPage1.setImageDrawable(getResources().getDrawable(R.drawable.page));
 mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page));
 if (currIndex == arg0-1) {
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0);
 } else if (currIndex == arg0+1) {
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0);
 }
 break;
 case 3:
 mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
 mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page));
 mPage2.setImageDrawable(getResources().getDrawable(R.drawable.page));
 if (currIndex == arg0-1) {
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0); 

 } else if (currIndex == arg0+1) {
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0);
 }
 break;
 case 4:
 mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
 mPage3.setImageDrawable(getResources().getDrawable(R.drawable.page));
 mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page));
 if (currIndex == arg0-1) {
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0);
 } else if (currIndex == arg0+1) {
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0);
 }
 break;
 case 5:
 mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
 mPage4.setImageDrawable(getResources().getDrawable(R.drawable.page));
 mPage6.setImageDrawable(getResources().getDrawable(R.drawable.page));
 if (currIndex == arg0-1) {
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0);
 } else if (currIndex == arg0+1) {
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0);
 }
 break;
 case 6:
 mPage6.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
 mPage5.setImageDrawable(getResources().getDrawable(R.drawable.page));
 mPage7.setImageDrawable(getResources().getDrawable(R.drawable.page));
 if (currIndex == arg0-1) {
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0);
 } else if (currIndex == arg0+1) {
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0);
 }
 break;
 case 7:
 mPage7.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
 mPage8.setImageDrawable(getResources().getDrawable(R.drawable.page));
 mPage6.setImageDrawable(getResources().getDrawable(R.drawable.page));
 if (currIndex == arg0-1) {
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0);
 } else if (currIndex == arg0+1) {
  animation = new TranslateAnimation(arg0+1, arg0, 0, 0);
 }
 break;
 case 8:
 mPage8.setImageDrawable(getResources().getDrawable(R.drawable.page_now));
 mPage7.setImageDrawable(getResources().getDrawable(R.drawable.page));
 if (currIndex == arg0-1) {
  animation = new TranslateAnimation(arg0-1, arg0, 0, 0);
 }
 break;
 }
 currIndex = arg0;//设置当前View
 animation.setFillAfter(true);// True:设置图片停在动画结束位置
 animation.setDuration(300);//设置动画持续时间
 } 

 public void startbutton(View v) {
 Intent intent = new Intent();
 intent.setClass(Viewpager.this,Viewdoor.class);//进入到开门效果的Activity
 startActivity(intent);
 this.finish();//结束本Activity
 } 

}

下面再看一下导航Activity的布局文件,

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" > 

 <android.support.v4.view.ViewPager
 android:id="@+id/viewpager"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center" > 

 <android.support.v4.view.PagerTitleStrip
 android:id="@+id/pagertitle"
 android:layout_width="wrap_content"
 android:layout_height="0dp"
 android:layout_gravity="bottom"
 android:background="#0000"
 android:textColor="#ffff" />
 </android.support.v4.view.ViewPager> 

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal"
 android:gravity="center_horizontal" > 

 <ImageView
 android:id="@+id/page0"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:layout_marginBottom="30dp"
 android:scaleType="matrix"
 android:src="@drawable/page_now" />
 <ImageView
 android:id="@+id/page1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:layout_marginBottom="30dp"
 android:layout_marginLeft="10dp"
 android:scaleType="matrix"
 android:src="@drawable/page" />
 <ImageView
 android:id="@+id/page2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:layout_marginBottom="30dp"
 android:layout_marginLeft="10dp"
 android:scaleType="matrix"
 android:src="@drawable/page" />
 <ImageView
 android:id="@+id/page3"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:layout_marginBottom="30dp"
 android:layout_marginLeft="10dp"
 android:scaleType="matrix"
 android:src="@drawable/page" />
 <ImageView
 android:id="@+id/page4"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:layout_marginBottom="30dp"
 android:layout_marginLeft="10dp"
 android:scaleType="matrix"
 android:src="@drawable/page" />
 <ImageView
 android:id="@+id/page5"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:layout_marginBottom="30dp"
 android:layout_marginLeft="20dp"
 android:scaleType="matrix"
 android:src="@drawable/page" />
 <ImageView
 android:id="@+id/page6"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:layout_marginBottom="30dp"
 android:layout_marginLeft="10dp"
 android:scaleType="matrix"
 android:src="@drawable/page" />
 <ImageView
 android:id="@+id/page7"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:layout_marginBottom="30dp"
 android:layout_marginLeft="10dp"
 android:scaleType="matrix"
 android:src="@drawable/page" />
 <ImageView
 android:id="@+id/page8"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom"
 android:layout_marginBottom="30dp"
 android:layout_marginLeft="10dp"
 android:scaleType="matrix"
 android:src="@drawable/page" /> 

 </LinearLayout> 

 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:orientation="vertical" > 

 <Button
 android:layout_width="wrap_content"
 android:layout_height="32dp"
 android:layout_marginTop="8dp"
 android:layout_marginLeft="8dp"
 android:text="直接开始我的微信生活"
 android:textSize="10sp"
 android:textColor="#fff"
 android:background="@drawable/button_bg"
 android:onClick="startbutton"
 />
 </LinearLayout> 

</FrameLayout>

在这里采用了Framelayout布局,因为这样就可以把开启我的维新生活Button以及下面的圆点一同显示在同一个页面上。这是一个小技巧,非常实用。导航页面完毕我们点击开启我的微信生活就会进入到一个大门效果的Activity,这也是一个动画效果。原理就是两张图片,分别朝不同的方向移动就实现了开门的效果。代码如下:

import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView; 

public class Viewdoor extends Activity { 

 private ImageView mLeft;//往左边移动的图片
 private ImageView mRight;//往右边移动的图片 

 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.viewdoor); 

 mLeft = (ImageView)findViewById(R.id.imageLeft);
 mRight = (ImageView)findViewById(R.id.imageRight); 

 AnimationSet anim = new AnimationSet(true);//动画集,一个类似于集合的功能
 TranslateAnimation mytranslateanim = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
 mytranslateanim.setDuration(2000);//设置动画时间
 anim.addAnimation(mytranslateanim);//添加动画
 anim.setFillAfter(true);//设置动画结束时停在结束位置
 mLeft.startAnimation(anim);//开始动画,下同。 

 AnimationSet anim1 = new AnimationSet(true);
 TranslateAnimation mytranslateanim1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,+1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f);
 mytranslateanim1.setDuration(1500);
 anim1.addAnimation(mytranslateanim1);
 anim1.setFillAfter(true);
 mRight.startAnimation(anim1); 

 new Handler().postDelayed(new Runnable(){
 public void run(){
 Intent intent = new Intent (Viewdoor.this,Main.class); //进入到主页面
 startActivity(intent);
 Viewdoor.this.finish();//结束本Activity
 }
 }, 1500); 

 } 

}

至此,关于微信的导航功能就介绍到这,比较重要的地方有,ViewPager的使用,小圆点动画效果的设置,也就是Tween动画要熟练掌握。下一篇将讲述微信主页面的实现,欢迎大家关注!
效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

您可能感兴趣的文章:

  • Android仿微信调用第三方地图应用导航(高德、百度、腾讯)
  • Android实现简单底部导航栏 Android仿微信滑动切换效果
  • 微信小程序实战之仿android fragment可滑动底部导航栏(4)
  • Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)
  • Android仿微信页面底部导航效果代码实现
  • Android仿微信5实现滑动导航条
  • Android仿微信实现首字母导航条
时间: 2018-04-11

Android仿微信调用第三方地图应用导航(高德、百度、腾讯)

实现目标 先来一张微信功能截图看看要做什么 其实就是有一个目的地,点击目的地的时候弹出可选择的应用进行导航. 大脑动一下,要实现这个功能应该大体分成两步: 底部弹出可选的地图菜单进行展示 点击具体菜单某一项的时候调用对应地图的api进行导航就ok啦 底部菜单这里用PopupWindow来做. 实现 1.菜单显示 PopupWindow支持传入view进行弹出展示,所有我们直接写一个菜单布局,高德.百度.腾讯 再加一个取消. map_navagation_sheet.xml <?xml versi

Android仿微信5实现滑动导航条

本文实例为大家分享了Android 仿微信5滑动导航效果,供大家参考,具体内容如下 ViewPageAdapter.java package com.rong; import java.util.ArrayList; import java.util.List; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; publi

微信小程序实战之仿android fragment可滑动底部导航栏(4)

底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一,因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏. 相关教程:微信小程序教程系列之设置标题栏和导航栏(7) 但是通过设置的这个底部的导航栏,功能上比较固定,它必须要设置与它对应的一个页面,而且并不能滑动. 在业务上,有时候会比较限制,并不能完全满足所需. 又例如早前有人拿着UI稿问我,这种广告轮播图的样式,在小程序能不能实现呢? 我当时没有想了下,还不是很确定,因为小程序的轮播图的那几个小点点实在比较普通,样式单一. 因

Android仿微信页面底部导航效果代码实现

大家在参考本地代码的时候要根据需要适当的修改,里面有冗余代码小编没有删除.好了,废话不多说了,一切让代码说话吧! 关键代码如下所示: .java里面的主要代码 public class MainActivity extends BaseActivity implements TabChangeListener { private Fragment[] fragments; private FragZaiXianYuYue fragZaiXianYuYue; private FragDaoLuJi

Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)

使用ViewPager,PagerSlidingTabStrip,SwipeRefreshLayout打造一款可以点击可以侧滑的顶部导航栏. 先简单介绍一下所用的两个个开源库. PagerSlidingTabStrip Github地址 用法: 1.向app Module中的build.gradle中添加依赖 dependencies { compile 'com.astuetz:pagerslidingtabstrip:1.0.1' } 2.把PagerSlidingTabStrip这个控件添

Android仿微信实现首字母导航条

本文介绍Android实现首字母导航条,先看张效果图,具体怎么实现看代码吧 具体的步骤 1.整体布局的显示 2. 实现A-Z的分组 3. 自定义A-Z的导航条 4. 中间显示/隐藏触摸到导航条具体的字母 activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/re

Android实现简单底部导航栏 Android仿微信滑动切换效果

Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏的设置方法类似于TabLayout的关联,View需要创建关联方法,用来关联VIewPager; 3. 通过关联方法获取ViewPager实例后,根据ViewPager页面数创建底部导航栏的图标按钮; 代码实现: 1. 新建第一个自定义View, 图标 + 文字 的底部按钮; /** * 自定义控件

Android仿微信键盘切换效果

Android 仿微信的键盘切换(录音,表情,文字,其他),IM通讯,类似朋友圈只要涉及到文字等相关的app都会要涉及到键盘的处理,今天就给大家分享一下Android 仿微信的键盘切换. 效果图如下: Android 仿微信的键盘切换,实现了录音.表情.其他和软键盘显示之间的切换,其中解决了很多博客介绍的键盘切换时,软键盘显示切换到表情(其他)时,出现屏幕晃动的情况,以及点击和滑动键盘显示区域外时,软键盘隐藏的功能等,废话不多说直接上代码,以供大家参考: xml: <?xml version=&qu

超简单的几行代码搞定Android底部导航栏功能

超简单,几行代码搞定Android底部导航栏-–应项目需求以及小伙伴的留言,新加了两个方法: 设置底部导航栏背景图片 添加底部导航栏选项卡切换监听事件 底部导航栏的实现也不难,就是下边是几个Tab切换,上边一般是一个FrameLayout,然后FrameLayout中切换fragment. 网上有不少关于Android底部导航栏的文章,不过好像都只是关于下边Tab切的,没有实现Tab与fragment的联动,用的时候还要自己手写这部分代码,对我这个比较懒(据说,懒是程序员的一种美德_#)得程序员

Android实现带有指示器的自定义底部导航栏

今天这篇文章,主要是给大家实现一个自定义的带有指示器的底部导航栏. 先看一下实现的效果吧. 这个自定义控件的使用要注意以下几个方面: 1.没有布局文件及资源文件,只需要一个java文件就可调用 2.可以非常灵活的使用,一句代码就可以添加到项目中 3.暂时只支持4.0以上版本,颜色值使用的是系统自带色值,如需在低版本使用,请自己替换颜色值 4.支持智能适配,可以根据底部按钮的数量,自动的调整布局 5.主内容区域,必须使用Fragment实现,通过附加到Viewpager上实现界面的左右滑动 下面给

Android程序开发之Fragment实现底部导航栏实例代码

流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏. 说明 IDE:AS,Android studio; 模拟器:genymotion; 实现的效果,见下图. 具体实现 为了讲明白这个实现过程,我们贴出来的代码多一写,这样更方便理解 [最后还会放出完整的代码实现] .看上图的界面做的比较粗糙,但实现过程的骨架都具有了,想要更完美的设计,之后自行完善吧 ^0^. 布局 通过观察上述效果图,发现任意一个选项页面都有三部分组成: 顶部去除ActionBar后的标题栏: 中间一个Fragment

android中Fragment+RadioButton实现底部导航栏

在App中经常看到这样的tab底部导航栏 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activity_mian.xml定义布局,整个布局的外面是线性布局,上面是帧布局切换不同的Fragment,底下是RadioGroup嵌套的是RadioButton.代码如下所示: <?xml version="1.0" encoding="utf-8"?> <Li

Android用Scroller实现一个可向上滑动的底部导航栏

静静等了5分钟竟不知道如何写我这第一篇文章.每次都想好好的学习学习,有时间多敲敲代码,写几篇自己的文章.今天终于开始实行了,还是有点小激动的.哈哈! 好了废话就不多收了.我今天想实现的一个功能就是一个可以上滑底部菜单栏.为什么我会想搞这么个东西呢, 还是源于一年前,我们app 有这么个需求,当时百度也好谷歌也好,都没有找到想要的效果,其实很简单的一个效果.但是当时我也是真的太菜了,所有有关自定义的控件真的是不会,看别人的代码还好,真要是自己写,一点头绪都没有.因为我试着写了,真的不行啊.当时觉得

Android底部导航栏的三种风格实现

一.效果图展示 如果动图没有动的话,也可以看下面这个静态图 以下挨个分析每个的实现,这里只做简单的效果展示,大家可以基于目前代码做二次开发. 二.BottomNavigationView 这是 Google 给我们提供的一个专门用于底部导航的 View,你只需要在新建 Activity 的时候选择 "Bottom Navigation Activity",IDE 就会自动使用 BottomNavigationView 帮你生成好相应的代码了. 1. 在 xml 中使用 <andr

Android实现底部导航栏功能(选项卡)

现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片.直接上各个布局文件或各个类的代码: 1. res/layout目录下的 maintabs.xml 源码: <?xml version="1.0&q