Android模块功能系列(1)一底部Tab标签以及照相、相册弹窗效果

请尊重个人劳动成果,转载注明出处,谢谢!
http://blog.csdn.net/xiaxiazaizai01/article/details/52109039

经常见群里有童鞋问如何实现底部Tab标签实现点击切换不同的页面效果,其实实现的方式有很多种,好了废话不多说,下面介绍一种采用LinearLayout + Fragment的方式来实现这个效果。赶项目的童鞋可以直接将代码拷贝到自己项目中即可运行使用,方便快速。看到标题的吃瓜群众不免开始吐槽起来,不是说好的还有照相以及相册的功能吗?我只能说:秋得嘛dei….后续会不断整理完善滴。哎…又说了这么多废话,开始进入正题。

先看张底部Tab效果图以及弹窗动画效果

这里写图片描述

动画效果先放张静态图,回头研究下怎么录gif图片,大家就先将就着看吧….

这里写图片描述

1.Tab底部标签布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

   <LinearLayout 
       android:id="@+id/llBottom"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:background="#f9f9f9"
       android:orientation="horizontal"
       >
       <LinearLayout 
          android:id="@+id/tab1" 
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:gravity="center"
          android:layout_weight="1"
           >
           <ImageView 
               android:id="@+id/ivTab1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginTop="6dp"
               android:background="@drawable/selector_tab1_state"
               />
           <TextView 
               android:id="@+id/tvTab1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="首页"
               android:textSize="12sp"
               android:layout_marginBottom="3dp"
               android:textColor="@drawable/selector_text_state"
               />
       </LinearLayout>
       <LinearLayout 
          android:id="@+id/tab2" 
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:gravity="center"
          android:layout_weight="1"
           >
           <ImageView 
               android:id="@+id/ivTab2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginTop="6dp"
               android:background="@drawable/selector_tab2_state"
               />
           <TextView 
               android:id="@+id/tvTab2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="分类"
               android:textSize="12sp"
               android:layout_marginBottom="3dp"
               android:textColor="@drawable/selector_text_state"
               />
       </LinearLayout>
       <LinearLayout 
          android:id="@+id/tab3" 
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:gravity="center"
          android:layout_weight="1"
           >
           <ImageView 
               android:id="@+id/ivTab3"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginTop="6dp"
               android:background="@drawable/selector_tab1_state"
               />
           <TextView 
               android:id="@+id/tvTab3"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="发布"
               android:textSize="12sp"
               android:layout_marginBottom="3dp"
               android:textColor="@drawable/selector_text_state"
               />
       </LinearLayout>
       <LinearLayout 
          android:id="@+id/tab4" 
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:gravity="center"
          android:layout_weight="1"
           >
           <ImageView 
               android:id="@+id/ivTab4"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginTop="6dp"
               android:background="@drawable/selector_tab4_state"
               />
           <TextView 
               android:id="@+id/tvTab4"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="消息"
               android:textSize="12sp"
               android:layout_marginBottom="3dp"
               android:textColor="@drawable/selector_text_state"
               />
       </LinearLayout>
       <LinearLayout 
          android:id="@+id/tab5" 
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:gravity="center"
          android:layout_weight="1"
           >
           <ImageView 
               android:id="@+id/ivTab5"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginTop="6dp"
               android:background="@drawable/selector_tab5_state"
               />
           <TextView 
               android:id="@+id/tvTab5"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="我的"
               android:textSize="12sp"
               android:layout_marginBottom="3dp"
               android:textColor="@drawable/selector_text_state"
               />
       </LinearLayout>
   </LinearLayout>

   <ImageView
       android:id="@+id/imageView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_centerHorizontal="true"
       android:layout_marginBottom="19dp"
       android:background="@drawable/selector_tab3_state" />

   <!-- 拍照、相册弹窗布局 -->
   <RelativeLayout
        android:id="@+id/layoutMenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#CC000000"
        android:orientation="horizontal"
        android:visibility="gone" >

        <LinearLayout
            android:id="@+id/layoutPop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentBottom="true"
            android:gravity="center_horizontal|bottom"
            android:orientation="horizontal"
            android:paddingBottom="100dp"
            android:paddingLeft="30dp"
            android:paddingRight="30dp" >

            <LinearLayout
                android:id="@+id/layoutCamera"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/ivCamera"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/home_camera" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:text="拍照"
                    android:textColor="#ffffff"
                    android:textSize="16sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/layoutAlbum"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/ivAlbum"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/home_album" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="15dp"
                    android:text="相册"
                    android:textColor="#ffffff"
                    android:textSize="16sp" />
            </LinearLayout>
        </LinearLayout>

        <ImageView
            android:id="@+id/ivMenuCancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:src="@drawable/main_menu_cancel" />
    </RelativeLayout>


  <FrameLayout
       android:id="@+id/fragmentContainer"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_above="@+id/llBottom"
       />    
</RelativeLayout>

顺便再把TextView、ImageView的selector部分也贴出来吧

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

2.selector_tab1_state:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/main_home_select" android:state_pressed="true" />
    <item android:drawable="@drawable/main_home_select" android:state_selected="true" />
    <item android:drawable="@drawable/main_home_normal" />
</selector>  

2.MainActivity中去加载这四个Fragment,同时设置点击底部Tab图片以及文字的颜色变化等。额…你在逗我吗??明明不是五个吗。。。中间按钮是用来做照相相册弹出动画的,后面会介绍到。

首先声明我们的四个fragment并将其加载到所在的宿主activity容器中

private Fragment currentFragment;
private IndexFragment indexFragment = new IndexFragment();
private ClassFragment classFragment = new ClassFragment();
private MessageFragment messageFragment = new MessageFragment();
private MineFragment mineFragment = new MineFragment();

//加载Fragment的方法
private void selectFragment(Fragment fragment){
    if(currentFragment == null){
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        //将Fragment加入到容器中
        transaction.add(R.id.fragmentContainer, fragment).commit();
        currentFragment = fragment;
    }else{
        if(currentFragment != fragment){
            FragmentTransaction transaction =getSupportFragmentManager().beginTransaction();
            /**
             * 如果要切换到的Fragment没有被Fragment事务添加,则隐藏被切换的Fragment,
             * 添加要切换的Fragment,否则,则隐藏被切换的Fragment,显示要切换的Fragment
             */
            if(!fragment.isAdded()){//如果Fragment没有添加add     
               transaction.hide(currentFragment)
               .add(R.id.fragmentContainer, fragment).commitAllowingStateLoss();
                }else{
                    transaction.hide(currentFragment).show(fragment).commitAllowingStateLoss();
                }
                currentFragment = fragment;
            }
        }
    }

设置底部Tab标签文字以及颜色选中状态改变的方法(其中涉及到的hide()以及show()方法就是接下来我们要说的相册弹出动画效果)

/**
     * 选中时字体、图片颜色变化
     */
    private void selectView(View view){
        if(view == tab3){//发布按钮
            if(layoutMenu.getVisibility() == View.VISIBLE){//弹窗可见
                //隐藏
                hide();
            }else{
                //显示
                show();
            }
            return;
        }
        if(currentSelectTab != null){
            currentSelectTab.setSelected(false);
        }
        view.setSelected(true);//改变图片颜色
        currentSelectTab = view;

        if(view == tab1){
            tvTab1.setSelected(true);
            tvTab2.setSelected(false);
            tvTab4.setSelected(false);
            tvTab5.setSelected(false);
        }else if(view == tab2){
            tvTab1.setSelected(false);
            tvTab2.setSelected(true);
            tvTab4.setSelected(false);
            tvTab5.setSelected(false);
        }else if(view == tab4){
            tvTab1.setSelected(false);
            tvTab2.setSelected(false);
            tvTab4.setSelected(true);
            tvTab5.setSelected(false);
        }else if(view == tab5){
            tvTab1.setSelected(false);
            tvTab2.setSelected(false);
            tvTab4.setSelected(false);
            tvTab5.setSelected(true);
        }
    }

3.点击中间发布按钮时,弹出照相、相册的弹窗效果,当然你也可以通过自定义dialog的形式展示

//显示弹窗及动画
    private void show() {
        layoutMenu.setVisibility(View.VISIBLE);
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.set_dialog_show);
        ivMenuCancel.startAnimation(animation);//关闭弹窗按钮

        Animation a0 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_show1);
        Animation a1 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_show2);
        Animation a2 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_show3);
        layoutPop.startAnimation(a0);
        layoutAlbum.startAnimation(a1);
        layoutCamera.startAnimation(a1);

    }
    //隐藏弹窗及动画
    private void hide() {
        Animation a0 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_view3);
        Animation a1 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_view1);
        Animation a2 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_view2);
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.set_dialog_hide);
        ivMenuCancel.startAnimation(animation);
        a2.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                layoutMenu.setVisibility(View.GONE);

            }

            @Override
            public void onAnimationEnd(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        layoutAlbum.startAnimation(a1);

        layoutCamera.startAnimation(a1);

        layoutPop.startAnimation(a2);
    }
说明:弹窗动画效果主要分为两部分,其一是照相、相册布局的上下平移效果,为实现效果差的动画效果,我们可以根据设置不同的平移时间来实现,其二是下方的 + 变 x 的旋转动画。伙伴们就先自行脑补下吧,回头我会用gif图片展示效果,这样就清晰明了了,大家也可以自行拷贝代码运行查看效果。

4.我们常会以布局文件的形式设置动画的效果,这里简单说下

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

  <!-- 点击关闭弹窗按钮旋转动画 -->  
    <rotate
        android:fromDegrees="0"
        android:toDegrees="45"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="150"
        />

    <!-- 
      alpha:渐变透明度动画效果
      scale:渐变尺寸伸缩动画效果
      translate:画面转换位置移动动画效果(平移)
      rotate:画面转移旋转动画效果(旋转)

      fillAfter:如果设置为true,控件动画结束时,将保持动画最后时的状态
      android:fromDegrees:开始旋转的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
      android:toDegrees :结束时旋转到的角度位置,正值代表顺时针方向度数,负值代码逆时针方向度数
     -->
</set>

最后,把MainActivity的完整代码贴出来

public class MainActivity extends FragmentActivity implements OnClickListener {

    private LinearLayout tab1,tab2,tab3,tab4,tab5;
    private View currentSelectTab;
    private RelativeLayout layoutMenu;//照相、相册弹窗布局
    private LinearLayout layoutCamera,layoutAlbum;//照相、相册的线性布局
    private ImageView ivCamera,ivAlbum;
    private LinearLayout layoutPop;//包裹拍照、相册的线性布局
    private ImageView ivMenuCancel;//关闭照相、相册弹窗布局的按钮
    private TextView tvTab1,tvTab2,tvTab3,tvTab4,tvTab5;//底部tab文字

    private Fragment currentFragment;
    private IndexFragment indexFragment = new IndexFragment();
    private ClassFragment classFragment = new ClassFragment();
    private MessageFragment messageFragment = new MessageFragment();
    private MineFragment mineFragment = new MineFragment();

    private String imagePath = "";//拍照图片路径

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化控件
        intViews();
        //默认为IndexFragment选中显示
        selectFragment(indexFragment);
        selectView(tab1);

    }
    //初始化控件
    private void intViews() {
        tab1 = (LinearLayout) findViewById(R.id.tab1);
        tab2 = (LinearLayout) findViewById(R.id.tab2);
        tab3 = (LinearLayout) findViewById(R.id.tab3);
        tab4 = (LinearLayout) findViewById(R.id.tab4);
        tab5 = (LinearLayout) findViewById(R.id.tab5);
        tvTab1 = (TextView) findViewById(R.id.tvTab1);
        tvTab2 = (TextView) findViewById(R.id.tvTab2);
        tvTab3 = (TextView) findViewById(R.id.tvTab3);
        tvTab4 = (TextView) findViewById(R.id.tvTab4);
        tvTab5 = (TextView) findViewById(R.id.tvTab5);

        tab1.setOnClickListener(this);
        tab2.setOnClickListener(this);
        tab3.setOnClickListener(this);
        tab4.setOnClickListener(this);
        tab5.setOnClickListener(this);
        //弹窗整体布局(照相、相册)的相对布局
        layoutMenu = (RelativeLayout) findViewById(R.id.layoutMenu);
        layoutCamera = (LinearLayout) findViewById(R.id.layoutCamera);//照相布局(带文字),动画用
        layoutAlbum = (LinearLayout) findViewById(R.id.layoutAlbum);//相册布局
        ivCamera = (ImageView) findViewById(R.id.ivCamera);//照相
        ivAlbum = (ImageView) findViewById(R.id.ivAlbum);//相册
        ivMenuCancel = (ImageView) findViewById(R.id.ivMenuCancel);//关闭照相、相册弹窗布局的按钮
        layoutPop = (LinearLayout) findViewById(R.id.layoutPop);//包裹拍照、相册的线性布局
        //点击弹窗则关闭弹窗
        layoutMenu.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                hide();
            }
        });

        //照相
        ivCamera.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //先隐藏弹窗
                layoutMenu.setVisibility(View.GONE);
                //拍照图片路径
                imagePath = FileUtils.getCameraPhotoPath();
                Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
                intent.putExtra(MediaStore.EXTRA_VIDEO_QUALITY, 1);
                File file = new File(imagePath);
                Uri uri = Uri.fromFile(file);
                // 获取拍照后未压缩的原图片,并保存在uri路径中  
                intent.putExtra(MediaStore.EXTRA_OUTPUT, uri);
                startActivityForResult(intent, MyConstants.INTENT_FOR_RESULT_MAIN_TO_CAMERA);
            }
        });

        //相册
        ivAlbum.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                //先隐藏弹窗布局
                layoutMenu.setVisibility(View.GONE);
                //跳转到相册布局
                ........
            }
        });

    }

    @Override
    public void onClick(View v) {

        selectView(v);

        switch (v.getId()) {
        case R.id.tab1:
            selectFragment(indexFragment);
            if(layoutMenu.getVisibility() == View.VISIBLE){
                //隐藏
                hide();
            }
            break;
        case R.id.tab2:
            selectFragment(classFragment);
            if(layoutMenu.getVisibility() == View.VISIBLE){
                //隐藏
                hide();
            }
            break;
        case R.id.tab4:
            selectFragment(messageFragment);
            if(layoutMenu.getVisibility() == View.VISIBLE){
                //隐藏
                hide();
            }
            break;  
        case R.id.tab5:
            selectFragment(mineFragment);
            if(layoutMenu.getVisibility() == View.VISIBLE){
                //隐藏
                hide();
            }
            break;
        }
    }

    //加载Fragment的方法
    private void selectFragment(Fragment fragment){
        if(currentFragment == null){
            FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
            //将Fragment加入到容器中
            transaction.add(R.id.fragmentContainer, fragment).commit();
            currentFragment = fragment;
        }else{
            if(currentFragment != fragment){
                FragmentTransaction transaction =getSupportFragmentManager().beginTransaction();
                /**
                 * 如果要切换到的Fragment没有被Fragment事务添加,则隐藏被切换的Fragment,添加要切换的Fragment,否则,则隐藏被切换的Fragment,显示要切换的Fragment
                 */
                if(!fragment.isAdded()){//如果Fragment没有添加add
                    transaction.hide(currentFragment).add(R.id.fragmentContainer, fragment).commitAllowingStateLoss();
                }else{
                    transaction.hide(currentFragment).show(fragment).commitAllowingStateLoss();
                }
                currentFragment = fragment;
            }

        }
    }

    /**
     * 选中时字体、图片颜色变化
     */
    private void selectView(View view){
        if(view == tab3){//发布按钮
            if(layoutMenu.getVisibility() == View.VISIBLE){//弹窗可见
                //隐藏
                hide();
            }else{
                //显示
                show();
            }
            return;
        }
        if(currentSelectTab != null){
            currentSelectTab.setSelected(false);
        }
        view.setSelected(true);//改变图片颜色
        currentSelectTab = view;

        if(view == tab1){
            tvTab1.setSelected(true);
            tvTab2.setSelected(false);
            tvTab4.setSelected(false);
            tvTab5.setSelected(false);
        }else if(view == tab2){
            tvTab1.setSelected(false);
            tvTab2.setSelected(true);
            tvTab4.setSelected(false);
            tvTab5.setSelected(false);
        }else if(view == tab4){
            tvTab1.setSelected(false);
            tvTab2.setSelected(false);
            tvTab4.setSelected(true);
            tvTab5.setSelected(false);
        }else if(view == tab5){
            tvTab1.setSelected(false);
            tvTab2.setSelected(false);
            tvTab4.setSelected(false);
            tvTab5.setSelected(true);
        }
    }
    //显示弹窗及动画
    private void show() {
        layoutMenu.setVisibility(View.VISIBLE);
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.set_dialog_show);
        ivMenuCancel.startAnimation(animation);//关闭弹窗按钮

        Animation a0 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_show1);
        Animation a1 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_show2);
        Animation a2 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_show3);
        layoutPop.startAnimation(a0);
        layoutAlbum.startAnimation(a1);
        layoutCamera.startAnimation(a1);

    }
    //隐藏弹窗及动画
    private void hide() {
        Animation a0 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_view3);
        Animation a1 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_view1);
        Animation a2 = AnimationUtils.loadAnimation(this, R.anim.set_dialog_view2);
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.set_dialog_hide);
        ivMenuCancel.startAnimation(animation);
        a2.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                layoutMenu.setVisibility(View.GONE);

            }

            @Override
            public void onAnimationEnd(Animation animation) {
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

        layoutAlbum.startAnimation(a1);

        layoutCamera.startAnimation(a1);

        layoutPop.startAnimation(a2);
    }   
}

代码中还是贴了一点关于拍照以及获取相册的代码,时候不早了,关于拍照以及读取相册功能就会在后续完善,看标题就知道,这个系列没完!!开发中常用的功能,我都会整理下来分享给大家。

做这个系列的目的就是将开发中常用的功能模块以及踩过的坑给整理出来,希望能对你有所帮助。完整代码会在此系列后面一块上传,欢迎大家来吐槽,有问题请留言,一块探讨学习

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值