安卓淘宝商店界面之高仿类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)
    @Override
    protected 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.IdeaLinearLayout
        android:id="@+id/ideaLinearLatout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </idea.analyzesystem.scrollview.simple.IdeaLinearLayout>

</FrameLayout>

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

 //沉浸式状态栏1
    dependencies {
        compile ('com.github.niorgai:StatusBarCompat:2.1.4', {
            exclude group: 'com.android.support'
        })
    }
    //沉浸式状态栏2
    compile '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() {
        @Override
        public 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() {
            @Override
            public 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);

            }

            @Override
            public void onChangedFirstColor(float percentage) {

            }

            @Override
            public void onChangedSecondColor(float percentage) {

            }
        });
        ideaScrollView.setOnSelectedIndicateChangedListener(new IdeaScrollView.OnSelectedIndicateChangedListener() {
            @Override
            public 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.IdeaScrollView
        android:id="@+id/ideaScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout
                android:id="@+id/one"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <com.jude.rollviewpager.RollPagerView
                    android:id="@+id/roll_pager_view"
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    ></com.jude.rollviewpager.RollPagerView>
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/one"/>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/two"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/two"/>

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/three"/>
            </LinearLayout>

            <ImageView
                android:id="@+id/three"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@drawable/four"/>
            <LinearLayout
                android:id="@+id/four"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/five"/>

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/six"/>
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/six"/>
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:src="@drawable/six"/>
            </LinearLayout>

        </LinearLayout>
    </idea.analyzesystem.scrollview.IdeaScrollView>

    <LinearLayout
        android:id="@+id/headerParent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <LinearLayout
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="72dp"
            android:background="#00FFFFFF"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="center"
                android:src="@drawable/back"
                />
            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"/>
          <ImageView
              android:id="@+id/icon"
              android:layout_width="30dp"
              android:layout_height="30dp"
              android:src="@drawable/aa"
              android:layout_gravity="center"/>
            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"/>
            <ImageView
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="center"
                />

        </LinearLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <RadioGroup
                android:id="@+id/radioGroup"
                android:background="#00FFFFFF"
                android:layout_width="match_parent"
                android:orientation="horizontal"
                android:layout_height="48dp">

                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:button="@null"
                    android:textColor="#00000000"
                    android:gravity="center"
                    android:text="宝贝"/>

                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:button="@null"
                    android:textColor="#00000000"
                    android:gravity="center"
                    android:text="评价"/>

                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:button="@null"
                    android:textColor="#00000000"
                    android:gravity="center"
                    android:text="详情"/>

                <RadioButton
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:button="@null"
                    android:textColor="#00000000"
                    android:text="推荐"/>

            </RadioGroup>

            <View
                android: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);
    }

    @Override
    protected 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);
    }

    @Override
    protected 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;
    }

    @Override
    public 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;
    }


    @Override
    public int getCount() {
        return imgs.length;
    }
}

 最后 item_roll_view_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android: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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值