您的位置:首页 > Web前端

Insta Splash的effect设计效果

2016-11-29 09:57 183 查看
针对于insta splash的Effect的功能设计

在Effect功能项的底部的效果按钮添加一个

1.在EffectSelectView设置一个按钮效果中的一种图片处理的效果布局

布局文件:

<?xmlversion="1.0"encoding="utf-8"?>

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:id="@+id/select_bg_img"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

<LinearLayout

android:id="@+id/btns_layout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:visibility="invisible">

<FrameLayout

android:id="@+id/select_change_btn"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="1">

</FrameLayout>

</LinearLayout>

</RelativeLayout>

EffectSelectView的类

public class EffectSelectViewextends FrameLayout {

private ImageViewbgImage;

private ViewchangeBtn;

private ViewbtnsLayout;

privateint
defaultBgID;

privateint
clickedBgID;

public
static interface OnSplashClickListener {

void onClick();

void onClickChange();

}

public
static enum StyleBtnMode {

STYLE_1(R.drawable.splash01,StyleMode.B_W),STYLE_2(

R.drawable.splash01,StyleMode.MOSAIC),STYLE_3(

R.drawable.splash01,StyleMode.POLKA_DOT);

publicint
imgID;

public StyleModestyleMode;

StyleBtnMode(intid,StyleMode
mode) {

imgID =
id;

styleMode =mode;

}

}

private OnSplashClickListeneronSplashClickListener;

private StyleBtnModestyleBtnMode = StyleBtnMode.STYLE_1;

public EffectSelectView(Contextcontext, AttributeSet
attrs) {

super(context,attrs);

iniView();

}

private
void iniView() {

LayoutInflater li = (LayoutInflater) getContext().getSystemService(

Context.LAYOUT_INFLATER_SERVICE);

li.inflate(R.layout.splash_view_splash_select,this,
true);

bgImage = (ImageView) findViewById(R.id.select_bg_img);

changeBtn = findViewById(R.id.select_change_btn);

btnsLayout = findViewById(R.id.btns_layout);

bgImage.setOnClickListener(new OnClickListener() {

@Override

public
void onClick(View v) {

if (onSplashClickListener !=null)
{

onSplashClickListener.onClick();

bgImage.setImageResource(clickedBgID);

btnsLayout.setVisibility(View.VISIBLE);

}

}

});

changeBtn.setOnClickListener(new OnClickListener() {

@Override

public
void onClick(View v) {

if (onSplashClickListener !=null)
{

onSplashClickListener.onClickChange();

}

}

});

}

public
void thisDefaultBtn(){

bgImage.performClick();

}

public
void setBgResource(int
defaultBgID, int
clickedBgID) {

this.defaultBgID =defaultBgID;

this.clickedBgID =clickedBgID;

bgImage.setImageResource(defaultBgID);

}

public
void iniData(StyleBtnMode mode) {

btnsLayout.setVisibility(INVISIBLE);

styleBtnMode =mode;

bgImage.setImageResource(defaultBgID);

}

public OnSplashClickListener getOnSplashClickListener() {

returnonSplashClickListener;

}

public
void setOnSplashClickListener(OnSplashClickListener
onSplashClickListener) {

this.onSplashClickListener =onSplashClickListener;

}

public StyleBtnMode getStyleBtnMode() {

returnstyleBtnMode;

}

public
void setStyleBtnMode(StyleBtnMode styleBtnMode) {

this.styleBtnMode =styleBtnMode;

}

public
void setImageResource(int
id){

bgImage.setImageResource(id);

}

}

2.在MyEffectBarView类中,将1中的类设置为自定义view,实现bar的效果

布局文件:

<?xmlversion="1.0"encoding="utf-8"?>

<FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<FrameLayout

android:id="@+id/ly_ori"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center_vertical"

android:visibility="invisible">

<ImageView

android:id="@+id/img_ori"

android:layout_width="50dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

<FrameLayout

android:layout_width="match_parent"

android:layout_height="64dp"

android:layout_gravity="center_vertical"

android:layout_marginLeft="0dp">

<HorizontalScrollView

android:id="@+id/ly_scroll"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scrollbars="none">

<LinearLayout

android:layout_width="450dp"

android:layout_height="match_parent"

android:minWidth="450dp"

android:orientation="horizontal">

<LinearLayout

android:id="@+id/splashShape1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape1"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape2"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape3"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape4"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape5"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape6"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape6"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape7"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape7"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape8"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape8"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape9"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape9"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape10"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape10"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape11"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape11"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape12"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape12"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape13"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape13"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape14"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape14"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape15"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape15"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape16"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape16"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape17"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape17"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape18"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp">

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape18"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

<LinearLayout

android:id="@+id/splashShape19"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="1"

android:layout_marginLeft="9dp"

android:layout_marginRight="9dp" >

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_gravity="center">

<com.baiwang.colorsplashfaceeffect.part.barview.EffectSelectView

android:id="@+id/shape19"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_gravity="center"/>

</FrameLayout>

</LinearLayout>

</LinearLayout>

</HorizontalScrollView>

</FrameLayout>

</FrameLayout>
MyEffectBarView类的代码

public class MyEffectBarView extends LinearLayout {

private EffectSelectViewshape1;

private EffectSelectViewshape2;

private EffectSelectViewshape3;

private EffectSelectViewshape4;

private EffectSelectViewshape5;

private EffectSelectViewshape6;

private EffectSelectViewshape7;

private EffectSelectViewshape8;

private EffectSelectViewshape9;

private EffectSelectViewshape10;

private EffectSelectViewshape11;

private EffectSelectViewshape12;

private EffectSelectViewshape13;

private EffectSelectViewshape14;

private EffectSelectViewshape15;

private EffectSelectViewshape16;

private EffectSelectViewshape17;

private EffectSelectViewshape18;

private EffectSelectViewshape19;

public MyEffectBarView(Contextcontext) {

super(context);

LayoutInflater li = (LayoutInflater) getContext().getSystemService(

Context.LAYOUT_INFLATER_SERVICE);

li.inflate(R.layout.splash_view_toolbar_effect,this,
true);

marginleft = ScreenInfoUtil.dip2px(context, 9);

initView();

}

public MyEffectBarView(Contextcontext, AttributeSet
attrs) {

super(context,attrs);

initView();

}

private StyleBtnModestyleBtnMode = StyleBtnMode.STYLE_1;

private EffectViewmSplashShapeView;

privateint
mCurSplashShape = 0;

privateint
marginleft = 0;

public
interface OnSplashBarChangeListener {

public
void clickSplash(int
index);

// public void clickSplashMode(int index);

public
void clickOriFunc();

}

private OnSplashBarChangeListenermListener;

public
void setOnSplashBarChangeListener(OnSplashBarChangeListener
l) {

mListener =l;

}

public
void initView() {

shape1 = (EffectSelectView) findViewById(R.id.shape1);

shape2 = (EffectSelectView) findViewById(R.id.shape2);

shape3 = (EffectSelectView) findViewById(R.id.shape3);

shape4 = (EffectSelectView) findViewById(R.id.shape4);

shape5 = (EffectSelectView) findViewById(R.id.shape5);

shape6 = (EffectSelectView) findViewById(R.id.shape6);

shape7 = (EffectSelectView) findViewById(R.id.shape7);

shape8 = (EffectSelectView) findViewById(R.id.shape8);

shape9 = (EffectSelectView) findViewById(R.id.shape9);

shape10 = (EffectSelectView) findViewById(R.id.shape10);

shape11 = (EffectSelectView) findViewById(R.id.shape11);

shape12 = (EffectSelectView) findViewById(R.id.shape12);

shape13 = (EffectSelectView) findViewById(R.id.shape13);

shape14 = (EffectSelectView) findViewById(R.id.shape14);

shape15 = (EffectSelectView) findViewById(R.id.shape15);

shape16 = (EffectSelectView) findViewById(R.id.shape16);

shape17 = (EffectSelectView) findViewById(R.id.shape17);

shape18 = (EffectSelectView) findViewById(R.id.shape18);

shape19 = (EffectSelectView) findViewById(R.id.shape19);

shape1.setBgResource(R.drawable.splash01, R.drawable.splash_s_01);

shape2.setBgResource(R.drawable.splash02, R.drawable.splash_s_02);

shape3.setBgResource(R.drawable.splash03, R.drawable.splash_s_03);

shape4.setBgResource(R.drawable.splash04, R.drawable.splash_s_04);

shape5.setBgResource(R.drawable.splash05, R.drawable.splash_s_05);

shape6.setBgResource(R.drawable.splash06, R.drawable.splash_s_06);

shape7.setBgResource(R.drawable.splash07, R.drawable.splash_s_07);

shape8.setBgResource(R.drawable.splash08, R.drawable.splash_s_08);

shape9.setBgResource(R.drawable.splash09, R.drawable.splash_s_09);

shape10.setBgResource(R.drawable.splash10, R.drawable.splash_s_10);

shape11.setBgResource(R.drawable.splash11, R.drawable.splash_s_11);

shape12.setBgResource(R.drawable.splash12, R.drawable.splash_s_12);

shape13.setBgResource(R.drawable.splash13, R.drawable.splash_s_13);

shape14.setBgResource(R.drawable.splash14, R.drawable.splash_s_14);

shape15.setBgResource(R.drawable.splash15, R.drawable.splash_s_15);

shape16.setBgResource(R.drawable.splash16, R.drawable.splash_s_16);

shape17.setBgResource(R.drawable.splash17, R.drawable.splash_s_17);

shape18.setBgResource(R.drawable.splash18, R.drawable.splash_s_18);

shape19.setBgResource(R.drawable.splash19, R.drawable.splash_s_19);

SplashClick shapeClick1 =new SplashClick(1);

SplashClick shapeClick2 =new SplashClick(2);

SplashClick shapeClick3 =new SplashClick(3);

SplashClick shapeClick4 =new SplashClick(4);

SplashClick shapeClick5 =new SplashClick(5);

SplashClick shapeClick6 =new SplashClick(6);

SplashClick shapeClick7 =new SplashClick(7);

SplashClick shapeClick8 =new SplashClick(8);

SplashClick shapeClick9 =new SplashClick(9);

SplashClick shapeClick10 =new SplashClick(10);

SplashClick shapeClick11 =new SplashClick(11);

SplashClick shapeClick12 =new SplashClick(12);

SplashClick shapeClick13 =new SplashClick(13);

SplashClick shapeClick14 =new SplashClick(14);

SplashClick shapeClick15 =new SplashClick(15);

SplashClick shapeClick16 =new SplashClick(16);

SplashClick shapeClick17 =new SplashClick(17);

SplashClick shapeClick18 =new SplashClick(18);

SplashClick shapeClick19 =new SplashClick(19);

shape1.setOnSplashClickListener(shapeClick1);

shape2.setOnSplashClickListener(shapeClick2);

shape3.setOnSplashClickListener(shapeClick3);

shape4.setOnSplashClickListener(shapeClick4);

shape5.setOnSplashClickListener(shapeClick5);

shape6.setOnSplashClickListener(shapeClick6);

shape7.setOnSplashClickListener(shapeClick7);

shape8.setOnSplashClickListener(shapeClick8);

shape9.setOnSplashClickListener(shapeClick9);

shape10.setOnSplashClickListener(shapeClick10);

shape11.setOnSplashClickListener(shapeClick11);

shape12.setOnSplashClickListener(shapeClick12);

shape13.setOnSplashClickListener(shapeClick13);

shape14.setOnSplashClickListener(shapeClick14);

shape15.setOnSplashClickListener(shapeClick15);

shape16.setOnSplashClickListener(shapeClick16);

shape17.setOnSplashClickListener(shapeClick17);

shape18.setOnSplashClickListener(shapeClick18);

shape19.setOnSplashClickListener(shapeClick19);

findViewById(R.id.ly_ori).setOnClickListener(new OnClickListener() {

@Override

public
void onClick(View v) {

if (mListener !=null) {

mListener.clickOriFunc();

}

}

});

}

private
class SplashClick implements OnSplashClickListener {

privateint
shapeIndex;

public SplashClick(intindex) {

shapeIndex =index;

}

@Override

public
void onClick() {

if (mListener !=null) {

mListener.clickSplash(shapeIndex);

}

if (mCurSplashShape !=shapeIndex) {

resetButtonBar();

}

mCurSplashShape =shapeIndex;

}

@Override

public
void onClickChange() {

if (mListener !=null) {

mListener.clickSplash(shapeIndex);

}

}

}

public
void changeOriBg(boolean
showOri) {

if (showOri) {

// findViewById(R.id.img_ori).setBackgroundResource(

// R.drawable.splash00);

} else {

resetButtonBar();

// findViewById(R.id.img_ori).setBackgroundResource(

// R.drawable.splash_s_00);

}

}

private
void resetButtonBar() {

shape1.iniData(styleBtnMode);

shape2.iniData(styleBtnMode);

shape3.iniData(styleBtnMode);

shape4.iniData(styleBtnMode);

shape5.iniData(styleBtnMode);

shape6.iniData(styleBtnMode);

shape7.iniData(styleBtnMode);

shape8.iniData(styleBtnMode);

shape9.iniData(styleBtnMode);

shape10.iniData(styleBtnMode);

shape11.iniData(styleBtnMode);

shape12.iniData(styleBtnMode);

shape13.iniData(styleBtnMode);

shape14.iniData(styleBtnMode);

shape15.iniData(styleBtnMode);

shape16.iniData(styleBtnMode);

shape17.iniData(styleBtnMode);

shape18.iniData(styleBtnMode);

shape19.iniData(styleBtnMode);

}

public
void scrollToPos(final
int index) {

final HorizontalScrollViewly_scroll = (HorizontalScrollView) findViewById(R.id.ly_scroll);

final LinearLayoutsplashShape1 = (LinearLayout) findViewById(R.id.splashShape1);

new Handler().postDelayed(new Runnable() {

@Override

publicvoid run() {

// 水平直接滚动800px,如果想效果更平滑可以使用

ly_scroll.smoothScrollTo((index -1)* (marginleft+splashShape1.getWidth()),
0);

// ly_scroll.scrollTo((index -1)* splashShape1.getWidth(), 0);

}

}, 0);

}

public
void resetButtonBarWithSelect(int
index) {

resetButtonBar();

switch (index) {

case 1:

shape1.setImageResource(R.drawable.splash_s_01);

break;

case 2:

shape2.setImageResource(R.drawable.splash_s_02);

break;

case 3:

shape3.setImageResource(R.drawable.splash_s_03);

break;

case 4:

shape4.setImageResource(R.drawable.splash_s_04);

break;

case 5:

shape5.setImageResource(R.drawable.splash_s_05);

break;

case 6:

shape6.setImageResource(R.drawable.splash_s_06);

break;

case 7:

shape7.setImageResource(R.drawable.splash_s_07);

break;

case 8:

shape8.setImageResource(R.drawable.splash_s_08);

break;

case 9:

shape9.setImageResource(R.drawable.splash_s_09);

break;

case 10:

shape10.setImageResource(R.drawable.splash_s_10);

break;

case 11:

shape11.setImageResource(R.drawable.splash_s_11);

break;

case 12:

shape12.setImageResource(R.drawable.splash_s_12);

break;

case 13:

shape13.setImageResource(R.drawable.splash_s_13);

break;

case 14:

shape14.setImageResource(R.drawable.splash_s_14);

break;

case 15:

shape15.setImageResource(R.drawable.splash_s_15);

break;

case 16:

shape16.setImageResource(R.drawable.splash_s_16);

break;

case 17:

shape17.setImageResource(R.drawable.splash_s_17);

break;

case 18:

shape18.setImageResource(R.drawable.splash_s_18);

break;

case 19:

shape19.setImageResource(R.drawable.splash_s_19);

break;

default:

break;

}

}

}
这样的布局使得底部一个按钮的所有效果变成一个bar的模型

3.在MyViewSplashBottomBar的类中将2中的类变成自定义view显示出来

布局文件:

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/splash_bottom_bg">

<!-- <FrameLayout

android:layout_width="match_parent"

android:layout_height="1dp"

android:background="@color/bottom_bar_top_line" /> -->

<FrameLayout

android:id="@+id/bottom_container"

android:layout_width="match_parent"

android:layout_height="60dp">

<LinearLayout

android:id="@+id/bottom_button_fl"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal">

<LinearLayout

android:id="@+id/ly_bottom_effect"

android:layout_width="0.0dip"

android:layout_height="fill_parent"

android:layout_weight="1.0"

android:gravity="center"

android:clickable="true"

android:focusable="true"

android:background="@drawable/mysplash_effect_layout_press"

android:orientation="vertical">

<ImageView

android:id="@+id/img_tool_effect"

android:layout_width="28dp"

android:layout_height="28dp"

android:layout_marginTop="10dp"

android:background ="@drawable/img_tool_shape"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="22dp"

android:gravity="center"

android:textSize="12sp"

android:duplicateParentState="true"

android:text="@string/tool_shape"

android:textColor="@color/home_bt_text"/>

</LinearLayout>

<LinearLayout

android:id="@+id/ly_bottom_effect2"

android:layout_width="0.0dip"

android:layout_height="fill_parent"

android:layout_weight="1.0"

android:gravity="center"

android:clickable="true"

android:focusable="true"

android:background="@drawable/mysplash_effect_layout_press"

android:orientation="vertical">

<ImageView

android:id="@+id/img_tool_effect2"

android:layout_width="28dp"

android:layout_height="28dp"

android:layout_marginTop="10dp"

android:background ="@drawable/img_tool_shape"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="22dp"

android:gravity="center"

android:textSize="12sp"

android:duplicateParentState="true"

android:text="@string/tool_shape"

android:textColor="@color/home_bt_text"/>

</LinearLayout>

<LinearLayout

android:id="@+id/ly_bottom_color"

android:layout_width="0.0dip"

android:layout_height="fill_parent"

android:layout_weight="1.0"

android:background="@drawable/mysplash_effect_layout_press"

android:clickable="true"

android:focusable="true"

android:gravity="center"

android:orientation="vertical" >

<ImageView

android:id="@+id/img_tool_color"

android:layout_width="28dp"

android:layout_height="28dp"

android:layout_marginTop="10dp"

android:background="@drawable/img_tool_effect"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="22dp"

android:gravity="center"

android:textSize="12sp"

android:duplicateParentState="true"

android:text="@string/tool_effect"

android:textColor="@color/home_bt_text"/>

</LinearLayout>

</LinearLayout>

</FrameLayout>

</RelativeLayout>

MyViewSplashBottomBar的类代码:

public class MyViewSplashBottomBarextends LinearLayout {

public
enum SplashBottomItem{

Shape,Effect,Effect2

};

public
interface OnSplashBottomBarItemClickListener {

public
void OnSplashBottomBarItemClick(SplashBottomItem
itemId);

}

private Viewly_shape;

private Viewly_effect;

private Viewly_2;

private ImageViewimg_effect;

private ImageViewimg_shape;

private ImageViewimg_effect2;

OnSplashBottomBarItemClickListener
mListener;

public MyViewSplashBottomBar(Contextcontext) {

super(context);

initView();

}

public MyViewSplashBottomBar(Contextcontext, AttributeSet
attrs) {

super(context,attrs);

initView();

}

public
void setOnSplashBottomBarItemClickListener(

OnSplashBottomBarItemClickListener
listener) {

mListener =listener;

}

public
void resetSelectorStat() {

img_shape.setSelected(false);

img_effect.setSelected(false);

// ly_shape.setBackgroundResource(R.drawable.img_bottom_item_bg);

// ly_effect.setBackgroundResource(R.drawable.img_bottom_item_bg);;

}

// public void setInSelectorStat(SplashBottomItem itemId, boolean isSelector) {

//

// if (itemId == SplashBottomItem.Shape) {

// if (isSelector) {

// ly_shape.setBackgroundResource(R.drawable.img_bottom_item_select);

// } else {

// ly_shape.setBackgroundResource(R.drawable.img_bottom_item_bg);

// }

// } else if (itemId == SplashBottomItem.Effect) {

// if (isSelector) {

// ly_effect.setBackgroundResource(R.drawable.img_bottom_item_select);

// } else {

// ly_effect.setBackgroundResource(R.drawable.img_bottom_item_bg);

// }

// }

// }

protectedvoid initView() {

LayoutInflater li = (LayoutInflater) getContext().getSystemService(

Context.LAYOUT_INFLATER_SERVICE);

li.inflate(R.layout.effect_splash_view_bottom_bar,this,
true);

ly_effect =this.findViewById(R.id.ly_bottom_effect);

ly_effect.setOnClickListener(new OnClickListener() {

@Override

public
void onClick(View v) {

if (mListener !=null) {

ly_effect.setSelected(false);

ly_shape.setSelected(true);

ly_2.setSelected(true);

mListener.OnSplashBottomBarItemClick(SplashBottomItem.Shape);

}

}

});

ly_2 =
this.findViewById(R.id.ly_bottom_effect2);

ly_2.setOnClickListener(new OnClickListener() {

@Override

public
void onClick(View v) {

if (mListener !=null) {

ly_2.setSelected(false);

ly_shape.setSelected(true);

ly_effect.setSelected(true);

mListener.OnSplashBottomBarItemClick(SplashBottomItem.Shape);

}

}

});

ly_shape =this.findViewById(R.id.ly_bottom_color);

ly_shape.setOnClickListener(new OnClickListener() {

@Override

public
void onClick(View v) {

if (mListener !=null) {

ly_effect.setSelected(true);

ly_shape.setSelected(false);

ly_2.setSelected(true);

mListener

.OnSplashBottomBarItemClick(SplashBottomItem.Effect);

}

}

});

img_shape = (ImageView) findViewById(R.id.img_tool_effect);

img_effect = (ImageView) findViewById(R.id.img_tool_color);

img_effect2=(ImageView) findViewById(R.id.img_tool_effect2);

LinearLayout btnsLayout = (LinearLayout)this.findViewById(R.id.bottom_button_fl);

int
screenWidth = ScreenInfoUtil.screenWidthDp(getContext());

intbtnWidthDp = 56;

int
maxWidth = btnWidthDp * (SplashBottomItem.values().length - 1);

if (screenWidth >maxWidth) {

btnsLayout.setMinimumWidth(ScreenInfoUtil.screenWidth(getContext()));

btnWidthDp = ScreenInfoUtil.screenWidthDp(getContext())/7;

} else {

btnsLayout.setMinimumWidth(ScreenInfoUtil.dip2px(getContext(),maxWidth));

}

ly_shape.getLayoutParams().width = ScreenInfoUtil.dip2px(getContext(),btnWidthDp);

ly_effect.getLayoutParams().width = ScreenInfoUtil.dip2px(getContext(),btnWidthDp);

ly_2.getLayoutParams().width=ScreenInfoUtil.dip2px(getContext(),btnWidthDp);

ly_effect.setSelected(true);

}

public
void fitforPad(){

View bottom_mask =this.findViewById(R.id.bottom_container);

ViewGroup.LayoutParams
lf_bottom_mask = (ViewGroup.LayoutParams)bottom_mask.getLayoutParams();

lf_bottom_mask.height = ScreenInfoUtil.dip2px(this.getContext(), 79);

}

/**

* @category 调整低栏显示项目的数量,控制显示的效果

* */

private
void resizeBottomBarWithItemCount(int
itemCount){

LinearLayout btnsLayout = (LinearLayout)this.findViewById(R.id.bottom_button_fl);

int
screenWidth = ScreenInfoUtil.screenWidthDp(getContext());

intbtnWidthDp = 56;

intmaxWidth =
btnWidthDp *itemCount;

if (screenWidth >maxWidth) {

btnsLayout.setMinimumWidth(ScreenInfoUtil.screenWidth(getContext()));

} else {

btnsLayout.setMinimumWidth(ScreenInfoUtil.dip2px(getContext(),maxWidth));

}

}

public
void setUnShowItems(List<SplashBottomItem> items){

int
count = SplashBottomItem.values().length -items.size() -1;

resizeBottomBarWithItemCount(count);

// for(int i=0 ; i < items.size(); i++){

// SplashBottomItem item = items.get(i);

// if(item == SplashBottomItem.Frame){

// //Container

// LinearLayout bottom_button_fl = (LinearLayout)this.findViewById(R.id.bottom_button_fl);

// View ly_frame = this.findViewById(R.id.ly_frame);

// bottom_button_fl.removeView(ly_frame);

// }

// }

}

public
void resetToolBarSelect(int
index) {

ImageView imageView0 = (ImageView) findViewById(R.id.img_tool_effect);

ImageView imageView1 = (ImageView) findViewById(R.id.img_tool_color);

ImageView imageView2 = (ImageView) findViewById(R.id.img_tool_effect2);

if (index == 0) {

if (imageView0 !=null
&& imageView1 != null&&imageView2!=null) {

imageView0.setImageResource(R.drawable.img_tool_shape_select);

imageView1.setImageResource(R.drawable.img_tool_effect);

imageView2.setImageResource(R.drawable.img_tool_shape_select);

}

} else
if (index == 1) {

if (imageView0 !=null
&& imageView1 != null&&imageView2!=null) {

imageView0.setImageResource(R.drawable.img_tool_shape);

imageView1.setImageResource(R.drawable.img_tool_effect_select);

imageView2.setImageResource(R.drawable.img_tool_shape);

}

}

else
if(index == -1)

{

if (imageView0 !=null
&& imageView1 != null&&imageView2!=null) {

imageView0.setImageResource(R.drawable.img_tool_shape);

imageView1.setImageResource(R.drawable.img_tool_effect);

imageView0.setImageResource(R.drawable.img_tool_shape);

}

}

}

}
到此所有的底部按钮的效果功能跟按钮联系起来

4.在ParentSplashActivity中:

布局文件:将3看成view使用

<com.baiwang.colorsplashfaceeffect.view.MyViewSplashBottomBar

android:id="@+id/parent_bottom_bar"

android:layout_width="fill_parent"

android:layout_height="fill_parent"/>

代码:

bottomBar = (MyViewSplashBottomBar)findViewById(R.id.parent_bottom_bar);

bottomBar.setOnSplashBottomBarItemClickListener(new OnSplashBottomBarItemClickListener() {

@Override

public
void OnSplashBottomBarItemClick(SplashBottomItem
itemId) {

//
TODO Auto-generated method stub

if(itemId == SplashBottomItem.Shape)

{

btnBottomEffectClick(false);

}

else {

btnBottomColorClick();

}

}

});
对bottom进行初始化
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: