Android 使用Fragment模仿微信界面的实例代码

什么是Fragment

  自从Android 3.0中引入fragments 的概念,根据词海的翻译可以译为:碎片、片段。其目的是为了解决不同屏幕分辩率的动态和灵活UI设计。大屏幕如平板小屏幕如手机,平板电脑的设计使得其有更多的空间来放更多的UI组件,而多出来的空间存放UI使其会产生更多的交互,从而诞生了fragments 。

  fragments 的设计不需要你来亲自管理view hierarchy 的复杂变化,通过将Activity 的布局分散到frament 中,可以在运行时修改activity 的外观,并且由activity 管理的back stack 中保存些变化。当一个片段指定了自身的布局时,它能和其他片段配置成不同的组合,在活动中为不同的屏幕尺寸修改布局配置(小屏幕可能每次显示一个片段,而大屏幕则可以显示两个或更多)。

  Fragment必须被写成可重用的模块。因为fragment有自己的layout,自己进行事件响应,拥有自己的生命周期和行为,所以你可以在多个activity中包含同一个Fragment的不同实例。这对于让你的界面在不同的屏幕尺寸下都能给用户完美的体验尤其重要。

Fragment优点

Fragment可以使你能够将activity分离成多个可重用的组件,每个都有它自己的生命周期和UI。

Fragment可以轻松得创建动态灵活的UI设计,可以适应于不同的屏幕尺寸。从手机到平板电脑。

Fragment是一个独立的模块,紧紧地与activity绑定在一起。可以运行中动态地移除、加入、交换等。

Fragment提供一个新的方式让你在不同的安卓设备上统一你的UI。

Fragment 解决Activity间的切换不流畅,轻量切换。

Fragment 替代TabActivity做导航,性能更好。

Fragment 在4.2.版本中新增嵌套fragment使用方法,能够生成更好的界面效果。

Fragment做局部内容更新更方便,原来为了到达这一点要把多个布局放到一个activity里面,现在可以用多Fragment来代替,只有在需要的时候才加载Fragment,提高性能。

可以从startActivityForResult中接收到返回结果,但是View不能。

图片中给出了实例的效果,在点击下方的按钮时,上半部分会自动切换成对应的内容。这里使用的技术是fragment。

想必大家对fragment已经有所了解,就算不清楚,百度也有详细的介绍。在这里就着重介绍实现的过程。

首先,拿其中的一个部分“首页”来讲:

上面一部分是fragment,下面则是相对固定的按钮区。也就是说,当点击按钮时,切换的只是上半部分内容。所以,每一个fragment都有一个自己的xml布局文件。就想图中所示的,“首页”这个fragment的xml文件就是由一个textview构成。
完成fragment的xml文件后,需要定义一个对应的Java类来找到它,比如:首页对应的类是homeFragment.java。注意,这个类需要继承fragment,并且每一个这样继承fragment的类都需要重写其onCreateView的方法。具体代码是:

import android.app.Fragment;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.example.cerian.marcon.R;
/**
 * Created by Cerian on 2017/7/9.
 */
public class homeFragment extends Fragment {
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
               Bundle savedInstanceState) {
    View view=inflater.inflate(R.layout.fragment_home, null);
    //找到按钮前要加view.
    return view;
  }
}

完成到这步时,每一个fragment的内容就已经完成了。接下来要做的是,将每一个fragment与一个页面绑定并在其上显示。这里我用了一个menufunction.xml

代码是:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  android:id="@+id/rl_layout"
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <LinearLayout
    android:id="@+id/ll_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
  </LinearLayout>
  <LinearLayout
    android:showDividers="beginning|end|middle"
    android:background="#ffffff"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">
    <ImageView
      android:id="@+id/ig_home"
      android:clickable="true"
      android:layout_weight="1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:src="@mipmap/homepage1"/>
    <ImageView
      android:id="@+id/ig_lib"
      android:clickable="true"
      android:layout_weight="1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:src="@mipmap/library1"/>
    <ImageView
      android:id="@+id/ig_my"
      android:clickable="true"
      android:layout_weight="1"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:src="@mipmap/my1"/>
  </LinearLayout>
</RelativeLayout>

在这个布局中,上面的LinearLayout是用来显示fragment内容的,下面的是按钮。

然后,在这个menufunction.xml的对应java类中,找到定义好的fragment,并显示。主要的思想是:①拿到一个管理者②开启一个事务③替换fragment内容④提交,注意,这里的第四步很容易被遗忘。

代码是:

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ImageView;
import com.example.cerian.marcon.fragment.homeFragment;
import com.example.cerian.marcon.fragment.libFragment;
import com.example.cerian.marcon.fragment.myFragment;
/**
 * Created by Cerian on 2017/7/9.
 */
public class home extends AppCompatActivity implements View.OnClickListener {
  private ImageView ig_home, ig_lib, ig_my;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.menufunction);
    ig_home = (ImageView) findViewById(R.id.ig_home);
    ig_lib = (ImageView) findViewById(R.id.ig_lib);
    ig_my = (ImageView) findViewById(R.id.ig_my);
    ig_home.setOnClickListener(this);
    ig_lib.setOnClickListener(this);
    ig_my.setOnClickListener(this);
/**
 * 第一步:拿到管理者
 * 第二步:开启事务
 * 第三步:替换
 * 第四步:提交
 */
    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction beginTransaction = fragmentManager.beginTransaction();
    beginTransaction.replace(R.id.ll_layout, new homeFragment());
    ig_home.setImageResource(R.mipmap.homepage2);
    beginTransaction.commit();
  }
  @Override
  public void onClick(View view) {
    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction beginTransaction = fragmentManager.beginTransaction();
    switch (view.getId()) {
      case R.id.ig_home: //点击的是主页
        beginTransaction.replace(R.id.ll_layout, new homeFragment());
        ig_home.setImageResource(R.mipmap.homepage2);
        ig_my.setImageResource(R.mipmap.my1);
        ig_lib.setImageResource(R.mipmap.library1);
        break;
      case R.id.ig_lib: //点击的是收藏
        beginTransaction.replace(R.id.ll_layout, new libFragment());
        ig_home.setImageResource(R.mipmap.homepage1);
        ig_my.setImageResource(R.mipmap.my1);
        ig_lib.setImageResource(R.mipmap.library2);
        break;
      case R.id.ig_my: //点击的是我的
        beginTransaction.replace(R.id.ll_layout, new myFragment());
        ig_home.setImageResource(R.mipmap.homepage1);
        ig_my.setImageResource(R.mipmap.my2);
        ig_lib.setImageResource(R.mipmap.library1);
        break;
    }
    beginTransaction.commit();
  }
}

其中,因为涉及到的点击事件有点多且相似,我用到了一个特殊的写法,也就是setonclicklistener(this),参数用了this,并重新定义了一个click方法。注意:这样写,必须要继承一个clicklistener的接口。
最后,提交就ok。

效果是:

这就是利用fragment来模拟微信界面。

以上所述是小编给大家介绍的Android 使用Fragment模仿微信界面的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android使用TabLayout+Fragment实现顶部选项卡

    先看效果图: 使用Tablayout,首先需要在项目中加入Design包 dependencies { compile 'com.android.support:design:24.1.1' } 在activity_main.xml布局文件中 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/

  • Android开发中如何解决Fragment +Viewpager滑动页面重复加载的问题

    前言 之前在做一个Viewpager上面加载多个Fragment时总会实例化已经创建好的Fragmnet对象类似 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { switch(position){ case 0: fragments=new Fragmnet01(); break; case

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

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

  • Android 两个Fragment之间的跳转和数据的传递实例详解

    Android  两个Fragment之间的跳转和数据的传递实例详解 作为一个Android的菜鸟,前些天在做项目的时候用到了fragment,需求是从一个Fragment跳转到另一个Fragment,并且还要传递数据,就像Activity的跳转一样.在网上找了好久都没找到很好的列子,最后通过看别人的博客和查文档终于做好了,现在整理一下,希望能帮助有需要的童鞋. 1.首先在第一个Fragment 里面拿到FragmentManger 和FragmentTransaction 代码如下. @Ove

  • Android在Fragment中实现监听触摸事件

    本文给大家介绍的是监听Fragment的触摸事件实现.如果大家有更好的机制,可以留言交流,下面来看看详细的介绍: 大家都知道,我们的activity中有onTouchEvent方法,可以用来实现触摸事件的监听. activity的触摸事件 @Override public boolean onTouchEvent(MotionEvent event) { return super.onTouchEvent(event); } 但是对于Fragment,其中却没有这个方法,如果我们在fragmen

  • Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

    TabLayou 主要实现的是标题头的 滑动 这个 控件 类似于 ScrollView XML中的布局 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <android.support.design.widget.TabLayout a

  • Android实现底部图标与Fragment的联动实例

    本文介绍了ndroid实现底部图标与Fragment的联动,分享给大家,希望此文章对各位有所帮助. 效果如下: 1.首先在res下的drawable下新建四个图标的xml,分别把图标的选中和未选中的状态设置好,所有的图片可以放在res下新建的一个drawable-xhdpi目录下,这里仅展示一个图标的xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="ht

  • Android 使用Fragment模仿微信界面的实例代码

    什么是Fragment 自从Android 3.0中引入fragments 的概念,根据词海的翻译可以译为:碎片.片段.其目的是为了解决不同屏幕分辩率的动态和灵活UI设计.大屏幕如平板小屏幕如手机,平板电脑的设计使得其有更多的空间来放更多的UI组件,而多出来的空间存放UI使其会产生更多的交互,从而诞生了fragments . fragments 的设计不需要你来亲自管理view hierarchy 的复杂变化,通过将Activity 的布局分散到frament 中,可以在运行时修改activit

  • Android用ActionBar高仿微信主界面的实例代码

    经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对较为深刻的理解了.唯一欠缺的是,前面我们都只是学习了理论知识而已,虽然知识点已经掌握了,但是真正投入到项目实战当中时会不会掉链子还很难说.那么不用担心,本篇文章我就将带领大家一起进入ActionBar的应用实战,将理论和实践完美结合到一起. 如果你还没有看过我的前两篇文章,建议先去阅读一下 Android ActionBar完全解析使用官方推荐的最佳导航栏(上)和 Android ActionBar完全解析使用官方推荐的最佳导航

  • 使用ViewPage+Fragment仿微信界面

    本文实例为大家分享了ViewPage+Fragment仿微信界面的具体代码,供大家参考,具体内容如下 实现效果: 左右滑动可切换界面,点击也可以实现 界面与碎片: 主界面: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="h

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

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

  • Android开发实现模仿微信小窗口功能【Dialog对话框风格窗口】

    本文实例讲述了Android开发实现模仿微信小窗口功能.分享给大家供大家参考,具体如下: 运用方法: 将显示窗口的风格 设置为对话框风格即可 具体效果: 具体实现: 首先我们先定义布局文件: <?xml version="1.0" encoding="utf-8" ?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" andro

  • Android 中按home键和跳转到主界面的实例代码

    //home Intent intent= new Intent(Intent.ACTION_MAIN); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK); //如果是服务里调用,必须加入new task标识 intent.addCategory(Intent.CATEGORY_HOME); startActivity(intent); //主界面 Intent intent = new Intent(Intent.ACTION_MAIN,null)

  • Android自定义手机界面状态栏实例代码

    前言 我们知道IOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错的体验!若你手机上安装有最新版的qq,并且你的安卓SDK版本是4.4及以上,你可以看下它的效果: 实现这个效果有两个方法: 1.在xml中设置主题或自定义style: Theme.Holo.Light.NoActionBar.TranslucentDecor Theme.Holo.NoActi

  • Android基于Xposed修改微信运动步数实例

    前言:Zygote 是 Android 的核心,每打开一个 app,Zygote 就会 fork 一个虚拟机实例来运行 app,基于Xposed我们可以使用android hook技术对APK中的方法进行调试.关键API拦截.外挂等. 这篇文章建立在Xposed模块开发的基础之上,没有开发过Xposed模块的请先看这篇入门教程<Xposed模块开发入门教程> 一.微信运动修改步数原理 当点击微信运动排行榜的时候微信APP会获取手机上计数传感器的数值,然后传感器会返回我们行走的步数.此时我们使用

  • Android开发之模仿微信打开网页的进度条效果(高仿)

    一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下  "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是实现方法都是一样的,而且,都忽略了微信加载网页时,进度条的缓慢动画效果,它不是生硬地一滑而过,而是用户体验很好,有个速度的变化,由慢到快的效果,语言难于描述,相信各位都有下载微信,可以随便打开个公众号的文章看看效果. 好了,上面说到,之前网上的方法都是都忽略了微信加载网页时,进度条的缓慢动画效果,实现代码也是

  • react native 仿微信聊天室实例代码

    一.前言 9月,又到开学的季节.为每个一直默默努力的自己点赞!最近都沉浸在react native原生app开发中,之前也有使用vue/react/angular等技术开发过聊天室项目,另外还使用RN技术做了个自定义模态弹窗rnPop组件. 一.项目简述 基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等技术开发的仿微信原生App界面聊天室--RN_ChatRoom,实现了原生app启动页.As

随机推荐