• Android之Fragment详解(非原创)


    文章大纲

    一、 什么是Fragment
    二、 Fragment生命周期
    三、 Fragment简单实例
    四、Fragment实战
    五、项目源码下载
    六、参考文章

     

    一、 什么是Fragment

    Fragment是Android3.0后引入的一个新的API,他出现的初衷是为了适应大屏幕的平板电脑, 当然现在他仍然是平板APP UI设计的宠儿,而且我们普通手机开发也会加入这个Fragment, 我们可以把他看成一个小型的Activity,又称Activity片段!想想,如果一个很大的界面,我们 就一个布局,写起界面来会有多麻烦,而且如果组件多的话是管理起来也很麻烦!而使用Fragment 我们可以把屏幕划分成几块,然后进行分组,进行一个模块化的管理!从而可以更加方便的在 运行过程中动态地更新Activity的用户界面!另外Fragment并不能单独使用,他需要嵌套在Activity 中使用,尽管他拥有自己的生命周期,但是还是会受到宿主Activity的生命周期的影响,比如Activity 被destory销毁了,他也会跟着销毁!

    下图是文档中给出的一个Fragment分别对应手机与平板间不同情况的处理图:

     

    二、 Fragment生命周期

     

    走一次生命周期图
    ①Activity加载Fragment的时候,依次调用下面的方法: onAttach -> onCreate -> onCreateView -> onActivityCreated -> onStart ->onResume
    ②当我们弄出一个悬浮的对话框风格的Activity,或者其他,就是让Fragment所在的Activity可见,但不获得焦点 onPause
    ③当对话框关闭,Activity又获得了焦点: onResume
    ④当我们替换Fragment,并调用addToBackStack()将他添加到Back栈中 onPause -> onStop -> onDestoryView !!注意,此时的Fragment还没有被销毁哦!!!
    ⑤当我们按下键盘的回退键,Fragment会再次显示出来: onCreateView -> onActivityCreated -> onStart -> onResume
    ⑥如果我们替换后,在事务commit之前没有调用addToBackStack()方法将 Fragment添加到back栈中的话;又或者退出了Activity的话,那么Fragment将会被完全结束, Fragment会进入销毁状态 onPause -> onStop -> onDestoryView -> onDestory -> onDetach

    三、 Fragment简单实例

    1. 创建Fragment

    静态加载Fragment

    实现流程:

     

      定义Fragment的布局,就是fragment显示内容的,方法是自定义一个Fragment类,需要继承Fragment或者他的子类,重写onCreateView()方法 在该方法中调用:inflater.inflate()方法加载Fragment的布局文件,接着返回加载的view对象,具体代码如下所示:

    public class Fragmentone extends Fragment {
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fragment1, container,false);
            return view;
        }   
    }
    

      在需要加载Fragment的Activity对应的布局文件中添加fragment的标签, 记住,name属性是全限定类名哦,就是要包含Fragment的包名,如下所示:

    <fragment
        android:id="@+id/fragment1"
        android:name="com.jay.example.fragmentdemo.Fragmentone"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
    

    Activity在onCreate( )方法中调用setContentView()加载布局文件即可!

    动态加载Fragment

    实现流程:

     
    image

    MainActivity的关键代码如下:

    public class MainActivity extends Activity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Display dis = getWindowManager().getDefaultDisplay();
            if(dis.getWidth() > dis.getHeight())
            {
                Fragment1 f1 = new Fragment1();
                getFragmentManager().beginTransaction().replace(R.id.LinearLayout1, f1).commit();
            }
            
            else
            {
                Fragment2 f2 = new Fragment2();
                getFragmentManager().beginTransaction().replace(R.id.LinearLayout1, f2).commit();
            }
        }   
    }
    

    2. Fragment管理与Fragment事务

     

    3. Fragment与Activity的交互

     

    四、Fragment实战

    1. TextView+Fragment实现底部导航

    2. RadioGroup + RadioButton+Fragment实现底部导航

    3. LinearLayout+RelativeLayout+TextView+Fragment实现底部导航(重点讲解)

    运行效果图如下所示

     

    drawable系列的资源
    文字资源:tab_menu_text.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/text_yellow" android:state_selected="true" />
        <item android:color="@color/text_gray" />
    </selector>
    

    图标资源:tab_menu_better.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@mipmap/tab_better_pressed" android:state_selected="true" />
        <item android:drawable="@mipmap/tab_better_normal" />
    </selector>
    

    activity的布局代码
    style.xml

    <style name="tab_menu_text">
        <item name="android:layout_marginTop">5dp</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">48dp</item>
        <item name="android:layout_centerInParent">true</item>
        <item name="android:textColor">@drawable/tab_menu_text</item>
    </style>
    
    
    <style name="tab_menu_bgnum">
        <item name="android:layout_width">20dp</item>
        <item name="android:layout_height">20dp</item>
        <item name="android:background">@mipmap/bg_num</item>
        <item name="android:layout_marginLeft">-10dp</item>
        <item name="android:textSize">12sp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@color/text_white</item>
    </style>
    

    activity.xml

    <RelativeLayout 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"
        tools:context=".MainActivity">
    
    
        <RelativeLayout
            android:id="@+id/ly_top_bar"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="@color/bg_topbar">
    
            <TextView
                android:id="@+id/txt_topbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:text="信息"
                android:textColor="@color/text_topbar"
                android:textSize="18sp" />
    
            <View
                android:layout_width="match_parent"
                android:layout_height="2px"
                android:layout_alignParentBottom="true"
                android:background="@color/div_white" />
    
        </RelativeLayout>
    
    
        <LinearLayout
            android:id="@+id/ly_tab_menu"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_alignParentBottom="true"
            android:background="@color/bg_white"
            android:orientation="horizontal">
    
            <LinearLayout
                android:id="@+id/ly_tab_menu_channel"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center">
    
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:padding="5dp">
    
                    <TextView
                        android:id="@+id/tab_menu_channel"
                        style="@style/tab_menu_text"
                        android:drawableTop="@drawable/tab_menu_channel"
                        android:text="@string/tab_menu_alert" />
    
                    <TextView
                        android:id="@+id/tab_menu_channel_num"
                        style="@style/tab_menu_bgnum"
                        android:layout_toRightOf="@+id/tab_menu_channel"
                        android:text="99+"
                        android:visibility="gone" />
                </RelativeLayout>
            </LinearLayout>
    
            <LinearLayout
                android:id="@+id/ly_tab_menu_message"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center">
    
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:padding="5dp">
    
                    <TextView
                        android:id="@+id/tab_menu_message"
                        style="@style/tab_menu_text"
                        android:drawableTop="@drawable/tab_menu_message"
                        android:text="@string/tab_menu_profile" />
    
                    <TextView
                        android:id="@+id/tab_menu_message_num"
                        style="@style/tab_menu_bgnum"
                        android:layout_toRightOf="@+id/tab_menu_message"
                        android:text="99+"
                        android:visibility="gone" />
                </RelativeLayout>
            </LinearLayout>
    
    
            <LinearLayout
                android:id="@+id/ly_tab_menu_better"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center">
    
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:padding="5dp">
    
                    <TextView
                        android:id="@+id/tab_menu_better"
                        style="@style/tab_menu_text"
                        android:drawableTop="@drawable/tab_menu_better"
                        android:text="@string/tab_menu_pay" />
    
                    <TextView
                        android:id="@+id/tab_menu_better_num"
                        style="@style/tab_menu_bgnum"
                        android:layout_toRightOf="@+id/tab_menu_better"
                        android:text="99+"
                        android:visibility="gone" />
                </RelativeLayout>
            </LinearLayout>
    
    
            <LinearLayout
                android:id="@+id/ly_tab_menu_setting"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center">
    
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:padding="5dp">
    
                    <TextView
                        android:id="@+id/tab_menu_setting"
                        style="@style/tab_menu_text"
                        android:drawableTop="@drawable/tab_menu_setting"
                        android:text="@string/tab_menu_alert" />
    
                    <ImageView
                        android:id="@+id/tab_menu_setting_partner"
                        android:layout_width="12dp"
                        android:layout_height="12dp"
                        android:layout_marginLeft="-5dp"
                        android:layout_toRightOf="@id/tab_menu_setting"
                        android:visibility="gone"
                        android:src="@mipmap/partner_red" />
    
                </RelativeLayout>
            </LinearLayout>
    
        </LinearLayout>
    
        <View
            android:id="@+id/div_tab_bar"
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:layout_above="@id/ly_tab_menu"
            android:background="@color/div_white" />
    
    
        <FrameLayout
            android:id="@+id/ly_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/div_tab_bar"
            android:layout_below="@id/ly_top_bar"/>
    
    
    </RelativeLayout>
    

    编写Fragment界面布局以及类
    fg_my.xml

    <?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="match_parent"
        android:orientation="vertical"
        android:padding="5dp">
    
        <Button
            android:id="@+id/btn_one"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="第一个显示信息"/>
    
        <Button
            android:id="@+id/btn_two"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="第二个显示信息"/>
    
        <Button
            android:id="@+id/btn_three"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="第三个显示信息"/>
    
        <Button
            android:id="@+id/btn_four"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="第四个显示信息"/>
    
    </LinearLayout>
    

    自定义的Fragment类,这里的话我们通过getActivity.findViewById()来获得Activity 中的小红点,这里仅仅是简单的控制显示而已! MyFragment.java代码如下所示:

    public class MyFragment extends Fragment implements View.OnClickListener{
    
        private Context mContext;
        private Button btn_one;
        private Button btn_two;
        private Button btn_three;
        private Button btn_four;
    
        public MyFragment() {
    
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.fg_my,container,false);
            //UI Object
            btn_one = (Button) view.findViewById(R.id.btn_one);
            btn_two = (Button) view.findViewById(R.id.btn_two);
            btn_three = (Button) view.findViewById(R.id.btn_three);
            btn_four = (Button) view.findViewById(R.id.btn_four);
            //Bind Event
            btn_one.setOnClickListener(this);
            btn_two.setOnClickListener(this);
            btn_three.setOnClickListener(this);
            btn_four.setOnClickListener(this);
            return view;
        }
    
        @Override
        public void onClick(View v) {
            switch (v.getId()){
                case R.id.btn_one:
                    TextView tab_menu_channel_num = (TextView) getActivity ().findViewById(R.id.tab_menu_channel_num);
                    tab_menu_channel_num.setText("11");
                    tab_menu_channel_num.setVisibility(View.VISIBLE);
                    break;
                case R.id.btn_two:
                    TextView tab_menu_message_num = (TextView) getActivity ().findViewById(R.id.tab_menu_message_num);
                    tab_menu_message_num.setText("20");
                    tab_menu_message_num.setVisibility(View.VISIBLE);
                    break;
                case R.id.btn_three:
                    TextView tab_menu_better_num = (TextView) getActivity ().findViewById(R.id.tab_menu_better_num);
                    tab_menu_better_num.setText("99+");
                    tab_menu_better_num.setVisibility(View.VISIBLE);
                    break;
                case R.id.btn_four:
                    ImageView tab_menu_setting_partner = (ImageView) getActivity ().findViewById(R.id.tab_menu_setting_partner);
                    tab_menu_setting_partner.setVisibility(View.VISIBLE);
                    break;
            }
        }
    }
    

    编写MainActivity
    MainActivity.java

    /**
     * Created by Coder-pig on 2015/8/30 0030.
     */
    public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    
        //Activity UI Object
        private LinearLayout ly_tab_menu_channel;
        private TextView tab_menu_channel;
        private TextView tab_menu_channel_num;
        private LinearLayout ly_tab_menu_message;
        private TextView tab_menu_message;
        private TextView tab_menu_message_num;
        private LinearLayout ly_tab_menu_better;
        private TextView tab_menu_better;
        private TextView tab_menu_better_num;
        private LinearLayout ly_tab_menu_setting;
        private TextView tab_menu_setting;
        private ImageView tab_menu_setting_partner;
        private FragmentManager fManager;
        private FragmentTransaction fTransaction;
        private MyFragment fg1;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            bindViews();
            ly_tab_menu_channel.performClick();
            fg1 = new MyFragment();
            fManager = getFragmentManager();
            fTransaction = fManager.beginTransaction();
            fTransaction.add(R.id.ly_content, fg1).commit();
    
        }
    
        private void bindViews() {
            ly_tab_menu_channel = (LinearLayout) findViewById(R.id.ly_tab_menu_channel);
            tab_menu_channel = (TextView) findViewById(R.id.tab_menu_channel);
            tab_menu_channel_num = (TextView) findViewById(R.id.tab_menu_channel_num);
            ly_tab_menu_message = (LinearLayout) findViewById(R.id.ly_tab_menu_message);
            tab_menu_message = (TextView) findViewById(R.id.tab_menu_message);
            tab_menu_message_num = (TextView) findViewById(R.id.tab_menu_message_num);
            ly_tab_menu_better = (LinearLayout) findViewById(R.id.ly_tab_menu_better);
            tab_menu_better = (TextView) findViewById(R.id.tab_menu_better);
            tab_menu_better_num = (TextView) findViewById(R.id.tab_menu_better_num);
            ly_tab_menu_setting = (LinearLayout) findViewById(R.id.ly_tab_menu_setting);
            tab_menu_setting = (TextView) findViewById(R.id.tab_menu_setting);
            tab_menu_setting_partner = (ImageView) findViewById(R.id.tab_menu_setting_partner);
    
            ly_tab_menu_channel.setOnClickListener(this);
            ly_tab_menu_message.setOnClickListener(this);
            ly_tab_menu_better.setOnClickListener(this);
            ly_tab_menu_setting.setOnClickListener(this);
    
        }
    
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.ly_tab_menu_channel:
                    setSelected();
                    tab_menu_channel.setSelected(true);
                    tab_menu_channel_num.setVisibility(View.INVISIBLE);
                    break;
                case R.id.ly_tab_menu_message:
                    setSelected();
                    tab_menu_message.setSelected(true);
                    tab_menu_message_num.setVisibility(View.INVISIBLE);
                    break;
                case R.id.ly_tab_menu_better:
                    setSelected();
                    tab_menu_better.setSelected(true);
                    tab_menu_better_num.setVisibility(View.INVISIBLE);
                    break;
                case R.id.ly_tab_menu_setting:
                    setSelected();
                    tab_menu_setting.setSelected(true);
                    tab_menu_setting_partner.setVisibility(View.INVISIBLE);
                    break;
            }
        }
    
        //重置所有文本的选中状态
        private void setSelected() {
            tab_menu_channel.setSelected(false);
            tab_menu_message.setSelected(false);
            tab_menu_better.setSelected(false);
            tab_menu_setting.setSelected(false);
        }
    
    
    }
    

    4. ViewPager+Fragment实现滑动切换页面

    五、项目源码下载

    链接:https://pan.baidu.com/s/1FogcPO15C-3NPCEiGCSmvg
    提取码:bktf

    六、参考文章

    http://www.runoob.com/w3cnote/android-tutorial-fragment-demo3.html

  • 相关阅读:
    javaWeb 使用 filter 处理 html 标签问题
    javaWeb 使用 filter 处理全站乱码问题
    Kubernetes常见部署方案--滚动更新、重新创建、蓝绿、金丝雀
    阿里云
    Kubernetes技术分析之灰度升级
    fetch进行post请求为什么会首先发一个options 请求?
    免费给你的网站加速,全球访问速度杠杠的
    抗DDOS,我选Cloudflare,免费!
    被骗几十万总结出来的Ddos攻击防护经验!------转自 服务器之家server
    微服务部署:蓝绿部署、滚动部署、灰度发布、金丝雀发布
  • 原文地址:https://www.cnblogs.com/WUXIAOCHANG/p/10565185.html
Copyright © 2020-2023  润新知