安卓淘宝商店界面之高仿类CollapsinToolBar 直接搬运到项目中

先说明一下这是我下载下来的demo稍作修改的,并不是原创，找不到原文链接了，如各位朋友有发现，请回复一下链接，谢谢！

OK 先上GIF看看效果

首先看看主界面：

MainActivity.class

package idea.analyzesystem.scrollview.simple;import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;import qiu.niorgai.StatusBarCompat;public class MainActivity extends AppCompatActivity {private IdeaLinearLayout ideaLinearLatout;@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main2);ideaLinearLatout = (IdeaLinearLayout) findViewById(R.id.ideaLinearLatout);ideaLinearLatout.setData(this,getWindow());StatusBarCompat.translucentStatusBar(this);//沉浸式状态栏}}

再看看主界面的布局

activity_main2.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><idea.analyzesystem.scrollview.simple.IdeaLinearLayoutandroid:id="@+id/ideaLinearLatout"android:layout_width="match_parent"android:layout_height="match_parent"></idea.analyzesystem.scrollview.simple.IdeaLinearLayout></FrameLayout>

然后在本项目中的build.gradle的dependencies内添加

 //沉浸式状态栏1dependencies {compile ('com.github.niorgai:StatusBarCompat:2.1.4', {exclude group: 'com.android.support'})}//沉浸式状态栏2compile 'com.github.crossoverone:StatusBarUtil:1.3.3'compile 'com.jude:rollviewpager:1.4.6' //轮播图

如果状态栏1不能用请用第2个具体用法可以百度

然后现在到了比较关键的自定义IdeaLinearLayout.class ideal好像是原创的名字这里给他点个赞


package idea.analyzesystem.scrollview.simple;import android.content.Context;
import android.graphics.Color;
import android.graphics.Rect;
import android.graphics.drawable.ColorDrawable;
import android.support.annotation.IdRes;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;import com.jude.rollviewpager.RollPagerView;
import com.jude.rollviewpager.hintview.ColorPointHintView;import java.util.ArrayList;import idea.analyzesystem.scrollview.IdeaScrollView;/*** Created by Xxx on 2018/9/5.*/public class IdeaLinearLayout extends LinearLayout {private Context mContext;private Window mWindow;private RollPagerView rollPagerView;private IdeaScrollView ideaScrollView;private TextView text;private LinearLayout header;private RadioGroup radioGroup;private LinearLayout headerParent;private ImageView icon;private View layer;private float currentPercentage = 0;private boolean isNeedScrollTo = true;private RollViewPagerAdapter rollViewPagerAdapter;private int[] imgs = new int[]{R.drawable.aa, R.drawable.aa, R.drawable.aa};//radioButton点击事件private RadioGroup.OnCheckedChangeListener radioGroupListener = new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {for (int i = 0; i < radioGroup.getChildCount(); i++) {RadioButton radioButton = (RadioButton) radioGroup.getChildAt(i);radioButton.setTextColor(radioButton.isChecked() ? getRadioCheckedAlphaColor(currentPercentage) : getRadioAlphaColor(currentPercentage));if (radioButton.isChecked() && isNeedScrollTo) {ideaScrollView.setPosition(i);}}}};public IdeaLinearLayout(Context context) {super(context);mContext = context;}public IdeaLinearLayout(Context context, @Nullable AttributeSet attrs) {super(context, attrs);mContext = context;}public IdeaLinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);mContext = context;}private void init() {setOrientation(VERTICAL);View itemview = LayoutInflater.from(mContext).inflate(R.layout.layout_idealinearlayout, this, false);header = (LinearLayout) itemview.findViewById(R.id.header);headerParent = (LinearLayout) itemview.findViewById(R.id.headerParent);icon = (ImageView) itemview.findViewById(R.id.icon);radioGroup = (RadioGroup) itemview.findViewById(R.id.radioGroup);ideaScrollView = (IdeaScrollView) itemview.findViewById(R.id.ideaScrollView);rollPagerView = (RollPagerView) itemview.findViewById(R.id.roll_pager_view);//设置播放时间间隔rollPagerView.setPlayDelay(3000);//停止自动播放rollPagerView.pause();// 修改指示器颜色rollPagerView.setHintView(new ColorPointHintView(mContext, ContextCompat.getColor(mContext, R.color.colorPrimary), Color.WHITE));// 设置轮播图适配器rollViewPagerAdapter = new RollViewPagerAdapter(mContext, imgs);rollPagerView.setAdapter(rollViewPagerAdapter);layer = itemview.findViewById(R.id.layer);Rect rectangle = new Rect();mWindow.getDecorView().getWindowVisibleDisplayFrame(rectangle);ideaScrollView.setViewPager(rollPagerView, getMeasureHeight(headerParent) - rectangle.top);icon.setImageAlpha(0);radioGroup.setAlpha(0);radioGroup.check(radioGroup.getChildAt(0).getId());View one = itemview.findViewById(R.id.one);View two = itemview.findViewById(R.id.two);View four = itemview.findViewById(R.id.four);View three = itemview.findViewById(R.id.three);ArrayList<Integer> araryDistance = new ArrayList<>();araryDistance.add(0);araryDistance.add(getMeasureHeight(one) - getMeasureHeight(headerParent));araryDistance.add(getMeasureHeight(one) + getMeasureHeight(two) - getMeasureHeight(headerParent));araryDistance.add(getMeasureHeight(one) + getMeasureHeight(two) + getMeasureHeight(three) - getMeasureHeight(headerParent));ideaScrollView.setArrayDistance(araryDistance);ideaScrollView.setOnScrollChangedColorListener(new IdeaScrollView.OnScrollChangedColorListener() {@Overridepublic void onChanged(float percentage) {int color = getAlphaColor(percentage > 0.9f ? 1.0f : percentage);header.setBackgroundDrawable(new ColorDrawable(color));radioGroup.setBackgroundDrawable(new ColorDrawable(color));icon.setImageAlpha((int) ((percentage > 0.9f ? 1.0f : percentage) * 255));radioGroup.setAlpha((percentage > 0.9f ? 1.0f : percentage) * 255);setRadioButtonTextColor(percentage);}@Overridepublic void onChangedFirstColor(float percentage) {}@Overridepublic void onChangedSecondColor(float percentage) {}});ideaScrollView.setOnSelectedIndicateChangedListener(new IdeaScrollView.OnSelectedIndicateChangedListener() {@Overridepublic void onSelectedChanged(int position) {isNeedScrollTo = false;radioGroup.check(radioGroup.getChildAt(position).getId());isNeedScrollTo = true;}});radioGroup.setOnCheckedChangeListener(radioGroupListener);this.addView(itemview);requestLayout();//重新绘制布局invalidate();//刷新当前界面}public void setRadioButtonTextColor(float percentage) {if (Math.abs(percentage - currentPercentage) >= 0.1f) {for (int i = 0; i < radioGroup.getChildCount(); i++) {RadioButton radioButton = (RadioButton) radioGroup.getChildAt(i);radioButton.setTextColor(radioButton.isChecked() ? getRadioCheckedAlphaColor(percentage) : getRadioAlphaColor(percentage));}this.currentPercentage = percentage;}}public void setData(Context context, Window window) {mContext = context;mWindow = window;init();}public int getMeasureHeight(View view) {int width = View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED);int height = View.MeasureSpec.makeMeasureSpec(0,View.MeasureSpec.UNSPECIFIED);view.measure(width, height);return view.getMeasuredHeight();}public int getAlphaColor(float f) {return Color.argb((int) (f * 255), 0x09, 0xc1, 0xf4);}public int getLayerAlphaColor(float f) {return Color.argb((int) (f * 255), 0x09, 0xc1, 0xf4);}public int getRadioCheckedAlphaColor(float f) {return Color.argb((int) (f * 255), 0x44, 0x44, 0x44);}public int getRadioAlphaColor(float f) {return Color.argb((int) (f * 255), 0xFF, 0xFF, 0xFF);}
}

然后是layout_idealinearlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><idea.analyzesystem.scrollview.IdeaScrollViewandroid:id="@+id/ideaScrollView"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><LinearLayoutandroid:id="@+id/one"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><com.jude.rollviewpager.RollPagerViewandroid:id="@+id/roll_pager_view"android:layout_width="match_parent"android:layout_height="300dp"></com.jude.rollviewpager.RollPagerView><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:src="@drawable/one"/></LinearLayout><LinearLayoutandroid:id="@+id/two"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:src="@drawable/two"/><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:src="@drawable/three"/></LinearLayout><ImageViewandroid:id="@+id/three"android:layout_width="match_parent"android:layout_height="wrap_content"android:src="@drawable/four"/><LinearLayoutandroid:id="@+id/four"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:src="@drawable/five"/><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:src="@drawable/six"/><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:src="@drawable/six"/><ImageViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:src="@drawable/six"/></LinearLayout></LinearLayout></idea.analyzesystem.scrollview.IdeaScrollView><LinearLayoutandroid:id="@+id/headerParent"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><LinearLayoutandroid:id="@+id/header"android:layout_width="match_parent"android:layout_height="72dp"android:background="#00FFFFFF"android:orientation="horizontal"><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:layout_gravity="center"android:src="@drawable/back"/><Viewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"/><ImageViewandroid:id="@+id/icon"android:layout_width="30dp"android:layout_height="30dp"android:src="@drawable/aa"android:layout_gravity="center"/><Viewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"/><ImageViewandroid:layout_width="30dp"android:layout_height="30dp"android:layout_gravity="center"/></LinearLayout><FrameLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><RadioGroupandroid:id="@+id/radioGroup"android:background="#00FFFFFF"android:layout_width="match_parent"android:orientation="horizontal"android:layout_height="48dp"><RadioButtonandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:button="@null"android:textColor="#00000000"android:gravity="center"android:text="宝贝"/><RadioButtonandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:button="@null"android:textColor="#00000000"android:gravity="center"android:text="评价"/><RadioButtonandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:button="@null"android:textColor="#00000000"android:gravity="center"android:text="详情"/><RadioButtonandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:button="@null"android:textColor="#00000000"android:text="推荐"/></RadioGroup><Viewandroid:id="@+id/layer"android:layout_width="match_parent"android:background="#00FFFFFF"android:layout_height="48dp"/></FrameLayout></LinearLayout></FrameLayout>

接着继续喝口开水

IdeaScrollView.class

import android.content.Context;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.WindowManager;
import android.widget.ScrollView;import com.jude.rollviewpager.RollPagerView;import java.util.ArrayList;/*** Created by idea on 2018/2/24.*/public class IdeaScrollView extends ScrollView {private final Point point;private RollPagerView viewPager;private int position = 0;ArrayList<Integer> arrayDistance = new ArrayList<>();private int headerHeight;public IdeaScrollView(Context context) {this(context,null,0);}public IdeaScrollView(Context context, AttributeSet attrs) {this(context, attrs,0);}public IdeaScrollView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);point = new Point();windowManager.getDefaultDisplay().getSize(point);}@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);if (viewPager != null && t != oldt) {viewPager.setTranslationY(t/2);}if(viewPager!=null&&t<=point.x-headerHeight&&getOnScrollChangedColorListener()!=null){getOnScrollChangedColorListener().onChanged(Math.abs(t)/Float.valueOf(point.x-headerHeight));if(t<=(point.x-headerHeight)/2){getOnScrollChangedColorListener().onChangedFirstColor(t/(point.x-headerHeight)/2);}else{getOnScrollChangedColorListener().onChangedSecondColor((t-(point.x-headerHeight)/2)/(point.x-headerHeight)/2);}}int currentPosition = getCurrentPosition(t,arrayDistance);if(currentPosition!=position&&getOnSelectedIndicateChangedListener()!=null){getOnSelectedIndicateChangedListener().onSelectedChanged(currentPosition);}this.position = currentPosition;}private int getCurrentPosition(int t, ArrayList<Integer> arrayDistance) {int index = 0;for (int i=0;i<arrayDistance.size();i++){if(i==arrayDistance.size()-1){index = i;}else {if(t>=arrayDistance.get(i)&&t<arrayDistance.get(i+1)){index = i;break;}}}return index;}private void scrollToPosition() {scrollToPosition(position);}private void scrollToPosition(int position){scrollTo(0,arrayDistance.get(position));}public void setViewPager(RollPagerView viewPager,int headerHeight){this.viewPager = viewPager;this.headerHeight = headerHeight;}public interface OnScrollChangedColorListener{void onChanged(float percentage);void onChangedFirstColor(float percentage);void onChangedSecondColor(float percentage);}public interface OnSelectedIndicateChangedListener{void onSelectedChanged(int position);}private OnSelectedIndicateChangedListener onSelectedIndicateChangedListener;private OnScrollChangedColorListener onScrollChangedColorListener;public OnScrollChangedColorListener getOnScrollChangedColorListener() {return onScrollChangedColorListener;}public void setOnScrollChangedColorListener(OnScrollChangedColorListener onScrollChangedColorListener) {this.onScrollChangedColorListener = onScrollChangedColorListener;}public RollPagerView getViewPager() {return viewPager;}public int getPosition() {return position;}public void setPosition(int position) {this.position = position;scrollToPosition();}public ArrayList<Integer> getArrayDistance() {return arrayDistance;}public void setArrayDistance(ArrayList<Integer> arrayDistance) {this.arrayDistance = arrayDistance;}public OnSelectedIndicateChangedListener getOnSelectedIndicateChangedListener() {return onSelectedIndicateChangedListener;}public void setOnSelectedIndicateChangedListener(OnSelectedIndicateChangedListener onSelectedIndicateChangedListener) {this.onSelectedIndicateChangedListener = onSelectedIndicateChangedListener;}
}

然后 IdeaViewPager.class 尊重原创把他的自定义ViewPager也给放进来现在没用到


import android.content.Context;
import android.graphics.Point;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.WindowManager;/*** Created by idea on 2018/2/24.*/public class IdeaViewPager extends ViewPager {private Point point;public IdeaViewPager(Context context) {this(context,null);}public IdeaViewPager(Context context, AttributeSet attrs) {super(context, attrs);WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);point = new Point();windowManager.getDefaultDisplay().getSize(point);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);setMeasuredDimension(point.x,point.x);}
}

接着就剩轮播图了心里美滋滋轮播图不要太简单写个适配器可以了

RollViewPagerAdapter.class


import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;import com.jude.rollviewpager.adapter.StaticPagerAdapter;/*** Created by Xxx on 2018/9/29.*/public class RollViewPagerAdapter extends StaticPagerAdapter {private Context mContext;private int[] imgs ;public RollViewPagerAdapter(Context mContext, int [] imgs) {this.mContext = mContext;this.imgs = imgs;}@Overridepublic View getView(ViewGroup container, int position) {View layout = LayoutInflater.from(mContext).inflate(R.layout.item_roll_view_pager,container,false);ImageView ivBanner = (ImageView) layout.findViewById(R.id.iv_banner);ivBanner.setImageResource(imgs[position]);return layout;}@Overridepublic int getCount() {return imgs.length;}
}

最后 item_roll_view_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:scaleType="fitXY"android:id="@+id/iv_banner"android:layout_width="match_parent"android:layout_height="wrap_content" /></android.support.constraint.ConstraintLayout>

到这里就结束了！

等不及的朋友请上车下载该Demo

链接如下https://download.csdn.net/download/qq_39099317/10697118

安卓淘宝商店界面之高仿类CollapsinToolBar 直接搬运到项目中相关推荐

淘宝直播窄带高清技术
本文来自阿里巴巴淘系技术部高级算法专家王立波在LiveVideoStackCon 2020线上峰会的分享,从直播背景.直播痛点分析.窄带高清.云视频技术趋势几方面详细介绍了如何在确保用户体验QOS不 ...
淘宝的商品中心和类目体系是怎么设计的 | 极客分享第 16 期
什么是"极客分享每周精选" "极客分享"是一个书签分享的网站(hackershare.dev),"每周精选"是该网站汇总精选书签的一个栏目. ...
淘宝店铺怎么设置定制类？方法是什么？
有很多的淘宝商家们开店了以后,打算去做定制方面的生意,也就是说决定去卖定制款,这个其实都是由淘宝商家们去进行设置的哦,那么淘宝店铺怎么设置定制类?下面为得了进行介绍. 一.入定制市场的特权: 1.勾选 ...
小虎电商浏览器：淘宝流失率高的原因是什么？如何降低流失率？
许多人现在都喜欢在淘宝上买东西,而淘宝商家在运营店铺的时候,也是会遇到许多顾客进店可是没有购买的人,而这种流失的情况较为高的话店铺就无法发展,那么淘宝流失率高的原因是什么?如何降低流失率? 淘宝流失率 ...
progressblock 安卓自定义进度条 progressbar 高仿仿QQ下载进度条
progressblock 安卓自定义进度条 progressbar 高仿仿QQ下载进度条附上我在公司做下载播放项目主要使用方法 progressBlock = (ProgressBlock) f ...
弘辽科技：淘宝店铺什么是B类违规？B类违规扣多少分？
不少卖家在经营店铺的时候,由于不了解平台的一些规则,而导致店铺违规被进行处罚,所以商家需要了解清楚淘宝的一些规则,下面我们来看看淘宝店铺什么是B类违规? 一.B类违规行为具体内容: 1.泄露他人信息. ...
高仿网易云音乐(vue实战项目)
高仿网易云音乐(Vue实战项目)
淘宝服务端高并发分布式架构演进之路
点击上方"方志朋",选择"置顶公众号" 技术文章第一时间送达! 1. 概述本文以淘宝作为例子,介绍从一百个并发到千万级并发情况下服务端的架构的演进过程,同时列 ...
淘宝亿级高并发分布式架构演进之路
https://segmentfault.com/a/1190000018626163 1. 概述本文以淘宝作为例子,介绍从一百个并发到千万级并发情况下服务端的架构的演进过程,同时列举出每个演进阶段 ...

安卓淘宝商店界面之高仿类CollapsinToolBar 直接搬运到项目中

安卓淘宝商店界面之高仿类CollapsinToolBar 直接搬运到项目中相关推荐

最新文章

热门文章