仿淘宝底栏点击效果

最新推荐文章于 2019-09-18 17:03:28 发布
最新推荐文章于 2019-09-18 17:03:28 发布
阅读量889 收藏 1
点赞数
分类专栏： Android自定义控件 文章标签： Android 淘宝底栏 属性动画 Fragment
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oMrApollo/article/details/49586441
版权

最近发现淘宝双十一版底栏有个点击效果挺有意思，然后就研究了一下，猜想估计是用属性动画吧，可是感觉怪怪的，现把我的思路写一下。希望大神指点。


首先，先搭界面，activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@android:color/black"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:id="@+id/main_content_ll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_orange_dark"
        android:layout_above="@+id/main_bottom_ll"
        android:orientation="vertical" >
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="淘宝"
            android:padding="10dp"
            android:textColor="#ffffff"
            android:textSize="20sp"
            />
        <FrameLayout
            android:id="@+id/main_content_fl"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
        </FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/main_bottom_ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#fafafa"
        android:orientation="horizontal" >

        <com.maxi.taobaotest.widget.PressedLayout
            android:id="@+id/main_bottom_home_pl"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:paddingTop="5dp"
                android:src="@drawable/sy_sy" />
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="首页"
                android:textSize="13sp"
                android:paddingBottom="5dp"
                android:textColor="@drawable/sy_sy"
                android:layout_gravity="center"
                />
        </com.maxi.taobaotest.widget.PressedLayout>

        <com.maxi.taobaotest.widget.PressedLayout
            android:id="@+id/main_bottom_wt_pl"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:paddingTop="5dp"
                android:src="@drawable/wt_wt" />
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="微淘"
                android:textSize="13sp"
                android:paddingBottom="5dp"
                android:textColor="@drawable/sy_sy"
                android:layout_gravity="center"
                />
        </com.maxi.taobaotest.widget.PressedLayout>

        <com.maxi.taobaotest.widget.PressedLayout
            android:id="@+id/main_bottom_sq_pl"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:paddingTop="5dp"
                android:src="@drawable/sq_sq" />
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="社区"
                android:textSize="13sp"
                android:paddingBottom="5dp"
                android:textColor="@drawable/sy_sy"
                android:layout_gravity="center"
                />
        </com.maxi.taobaotest.widget.PressedLayout>

        <com.maxi.taobaotest.widget.PressedLayout
            android:id="@+id/main_bottom_gwc_pl"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:paddingTop="5dp"
                android:src="@drawable/gwc" />
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="购物车"
                android:textSize="13sp"
                android:paddingBottom="5dp"
                android:textColor="@drawable/sy_sy"
                android:layout_gravity="center"
                />
        </com.maxi.taobaotest.widget.PressedLayout>
        <com.maxi.taobaotest.widget.PressedLayout
            android:id="@+id/main_bottom_user_pl"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:paddingTop="5dp"
                android:src="@drawable/mytb" />
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我的淘宝"
                android:textSize="13sp"
                android:paddingBottom="5dp"
                android:textColor="@drawable/sy_sy"
                android:layout_gravity="center"
                />
        </com.maxi.taobaotest.widget.PressedLayout>
    </LinearLayout>
	<View 
	    android:layout_width="match_parent"
	    android:layout_height="1dp"
	    android:layout_above="@id/main_bottom_ll"
	    android:background="@color/light_gray_3"
	    />
</RelativeLayout>
据我观察淘宝下面的底栏点击后会收缩，所以我猜测是底栏整体设置了属性动画，即ObjectAnimator，所以我们在此也将底栏设置一个x轴横向收缩的一个动画。 

public static AnimatorSet anim;

	private void initAnimator() {
		ObjectAnimator anim1 = ObjectAnimator.ofFloat(main_bottom_ll, "scaleX",
				1f, 0.99f);
		ObjectAnimator anim2 = ObjectAnimator.ofFloat(main_bottom_ll, "scaleX",
				0.99f, 1f);
		anim = new AnimatorSet();
		anim.play(anim2).after(anim1);
		anim.setDuration(50);
	}
由于点击后收缩，所以点击后将anim进行start。

为了方便，我将底栏的控件进行了封装，PressedLayout。方便用户选中后的变色操作。同时在用户点击抬起后将anim进行start。

package com.maxi.taobaotest.widget;

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.LinearLayout;

import com.maxi.taobaotest.activity.MainActivity;

public class PressedLayout extends LinearLayout {
	private ClickListener listener;

	public PressedLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	@SuppressLint("NewApi")
	public PressedLayout(Context context, AttributeSet attrs, int defStyleAttr) {
		super(context, attrs, defStyleAttr);
	}

	public PressedLayout(Context context) {
		super(context);
	}

	public void setPressed(final boolean pressed) {
		super.setPressed(pressed);
		this.postDelayed(new Runnable() {
			@Override
			public void run() {
				for (int i = 0; i < getChildCount(); i++) {
					View view = getChildAt(i);
					view.setPressed(pressed);
				}
			}
		}, 50);

	};

	public boolean isSelected() {
		return super.isSelected();
	}

	public void setSelected(final boolean selected) {
		super.setSelected(selected);
		this.postDelayed(new Runnable() {
			@Override
			public void run() {
				for (int i = 0; i < getChildCount(); i++) {
					View view = getChildAt(i);
					view.setSelected(selected);
				}
			}
		}, 50);
	}
    
	public void setClickListener(ClickListener clickListener) {
		this.listener = clickListener;
	}

    private Handler mHandler = new Handler();
	@SuppressLint("ClickableViewAccessibility")
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN: {
//			setPressed(true);
		}
			return true;
		case MotionEvent.ACTION_UP: {
//			setPressed(false);
			mHandler.post(new Runnable() {
                @Override
                public void run() {
                    MainActivity.anim.start();
//                    MainActivity.anim.end();
                }
            });
            if (listener != null) {
                listener.onClick();
            }
		}
			return true;
		}
		return super.onTouchEvent(event);
	}
	/**
     *  点击事件处理回调　
     */
    public interface ClickListener {
        public void onClick();
    }
}

主要的代码大致就这些。有疑问或建议请留言，谢谢！


属性动画用起来还是很方便的，建议没有涉及过的同学去看看。

下面是我写的一个listview的小动画 ，就是根据属性动画实现的。


Maximilian_M
关注
专栏目录
有关用Fragment实现仿淘宝购物APP底部菜单栏
qq_45648544的博客
12-14 1028
有关用Fragment实现仿淘宝底部菜单栏 效果图如下： 一、Fragment的简单介绍和使用 1.什么是Fragment fragment它自己的中文意思：碎片； 一个可以将activity拆分成几个完全独立封装的可重用的组件，每个组件有自己的生命周期和ui布局。 2.Fragment动态加载方法 ①创建一个类继承Fragment，复写onCreateView方法。 public class FragmentBottom extends Fragment { @Nullable @O
仿淘宝Android实现底部导航栏图标溢出效果-clipChildren属性
Tiger的专栏
11-21 3647
1.clipChildren和clipPadding说明 clipChildren用来定义他的子控件是否要在他应有的边界内进行绘制。 默认情况下，clipChild被设置为true。 也就是不允许进行扩展绘制。 clipToPadding用来定义ViewGroup是否允许在padding中绘制。默认情况下，cliptopadding被设置为ture， 也就是把padding中的值都进行裁切了。 还有该功能是android第一个版本就已经提供的方法，所有可以跨任意android版本使用； 这两个属性联.
类似淘宝底部菜单的实现
06-09
类似淘宝底部菜单的实现
仿淘宝手机端底部菜单（菜单切换 页面跳转 图标变化）
aiqingshan6402的博客
10-02 1736
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport"...
用 FragmentTabHost 实现仿淘宝底部菜单
liujunyang0926的博客
02-20 696
先看一下效果显示图 通过点击不同的tab能够使上方跳转到不同的界面 这里用到的工具就是FragmentTabHost： 图中FragmentTabHost就是下面黑色的标签栏： 一个标签栏包括5个tab，一个tab由图中元素组成。 下面看实际代码： 第一步在mainActivity.xml里建立FragmentTabHost： 其中readltabcontent就是点击及tab后
仿京东、淘宝底部导航
10-23
仿照京东、淘宝使用RadioGroup实现导航效果,UI设计优美，推荐给大家！
android 底部弹出 仿造淘宝 三个demo
04-02
android 底部弹出栏，三个demo示例，仿淘宝 AndroidSweetSheet BottomPopupWindowDemo MultiSelectPopWindow
Android仿淘宝商品拖动查看详情及标题栏渐变功能
01-20
【Android仿淘宝商品拖动查看详情及标题栏渐变功能】 在Android开发中，为了提供类似淘宝商品详情页的用户体验，我们可以实现一个拖动查看详细信息的功能，并且在拖动过程中让标题栏渐变隐藏。本篇文章将探讨如何...
FragmentTabHost+Fragment实现底部导航栏，仿淘宝
09-09
在Android应用开发中，创建一个类似淘宝的底部导航栏是常见的需求，这涉及到对Fragment、TabHost以及布局管理的深入理解。本示例代码“FragmentTabHostDemo”旨在教你如何利用FragmentTabHost和Fragment实现这一功能...
仿淘宝网页动态网页效果，纯css+html+JavaScript
最新发布
07-13
在本项目中，我们主要探讨如何使用HTML、CSS和JavaScript技术来实现一个仿淘宝的动态网页效果。这个项目旨在帮助开发者提升对前端开发技术的理解，尤其是网页布局、交互设计以及响应式网页设计等方面。 首先，HTML...
Android实现淘宝底部图标导航栏
01-21
在上一篇中，简单的使用透明主题的Activity实现了仿微信右侧顶部的对话框，上午又花了两个小时研究了一下淘宝底部的导航栏实现，网上的做法也有很多，今天我就使用一种通过基本控件加上布局的方式，没有任何的自定义风格，控件等来实现，还是老样子，先看一下效果图： 下面就来具体看一看如何实现的，还是按照步骤来吧： 绘制主界面 activity_layout.xml代码如下： <?xml version=1.0 encoding=utf-8?> <RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android
安卓仿淘宝导航栏实现
01-03
RadioButton+Fragment仿淘宝导航栏 因为博主本人是初学者，所以本文参考了多位大佬的文章后才弄明白，以下代码由本人根据多位博主的文章整合修改完成 效果图 主布局xml文件 //导航栏与上方界面之间的一条线 主布局中的这一句android:drawableTop=”@drawable/home_button_selector”中用到的home_button_selector,这里我只写一个，其他四个和这个原理相同（放在drawable文件下，其中用到的图标图片放在mipmap下） 我们可以把RadioButton中用到的重复代码放在style中
实现点击到底部、顶部、指定div功能
weixin_30510153的博客
12-26 241
顶部： $(".back_top").click(function () { 　　scrollTo(0, 0); }); function goTop() { 　　$('html, body').animate({scrollTop:0}, 'slow'); } 底部： $(".back_bottom").click(function () { 　　...
html移动端底部导航菜单按钮(仿各大app底部)
热门推荐
只为更懂'你'
09-18 1万+
不多说直接上代码: <!DOCTYPE html> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <html lang="en"> <he...
京东界面之底部导航栏
Liba_ba的博客
01-05 2644
//Java哦 public class Jingdong extends AppCompatActivity { private BottomTabBar bottab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceS
Android聊天页面发送图片定制(类似微信)
Maxi的专栏
04-08 9355
前言微信聊天页面的图片显示是一个自定制的形状，和它的聊天背景形状一样，在此仿微信定制了一个工具，可以自定制他的形状。前提是要有个背景图片。我在此封装的是网络和本地图片的定制工具类，基于universal-image-loader。 实现思路这里用到了图像合成类PorterDuffXfermode。有个讲解的很详细的博客：Android Paint之 setXfermode PorterDuffXf
Android仿淘宝商品图片滚动效果实现教程
总结来说，这篇文章详细介绍了如何通过自定义的`ScrollViewCont`类来实现Android仿淘宝商品浏览界面的图片滚动效果，包括手动与自动触发机制、多指滑动处理以及滚动事件的监听和处理。通过理解和实现这些细节，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值