先说明一下这是我下载下来的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