您的位置:首页 > 其它

RippleDrawable

2015-11-12 16:43 381 查看
public class

RippleDrawable Added
in
API
level 21

extends LayerDrawable

java.lang.Object
android.graphics.drawable.Drawable
android.graphics.drawable.LayerDrawable
android.graphics.drawable.RippleDrawable

可以使用系统的默认效果

?android:attr/selectableItemBackground (有界波纹)

?android:attr/selectableItemBackgroundBorderless (无界波纹)

这两个属性对应(在themes_material.xml里)

<item name="selectableItemBackground">@drawable/item_background_material</item>
<item name="selectableItemBackgroundBorderless">@drawable/item_background_borderless_material</item>


item_background_borderless_material.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight" />


item_background_borderless_material_dark.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/ripple_material_dark" />


item_background_borderless_material_light.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/ripple_material_light" />


item_background_material.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:id="@id/mask">
<color android:color="@color/white" />
</item>
</ripple>


item_background_material_dark.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/ripple_material_dark">
<item android:id="@id/mask">
<color android:color="@color/white" />
</item>
</ripple>


item_background_material_light.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/ripple_material_light">
<item android:id="@id/mask">
<color android:color="@color/white" />
</item>
</ripple>


按照上面的格式

<ImageView
android:id="@+id/image"
android:layout_width="400dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:clickable="true"
android:src="#22354545"
android:background="@drawable/ripple_drawable"
android:scaleType="center" />


这个是有边界的

<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/accent_dark">
<item >
<shape
android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>




这是一个无边界的

<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/accent_dark">
</ripple>





ripple里有个radius 属性,表示波纹的中心点就在以View中心点为圆心,radius为半径的圆内
<?xml version="1.0" encoding="utf-8"?>
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:radius="100dp"
android:color="@color/accent_dark">
<item >
<shape
android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>




练习:

布局文件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
>

<LinearLayout
android:id="@+id/buttonsContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:padding="@dimen/activity_horizontal_margin"
android:clipChildren="false"
android:clipToPadding="false"/>

</FrameLayout>


res/layout/circular_button_layout.xml.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="@dimen/button_size"
android:layout_height="@dimen/button_size"
android:background="@drawable/circular_button"
android:stateListAnimator="@anim/button_elevation"
android:clickable="true"
>

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/circular_button_ripple_selector"
android:textAppearance="?android:textAppearanceLarge"
android:textColor="@color/button_text_selector"
android:duplicateParentState="true"
android:gravity="center"
tools:text="Text"
tools:textColor="#000"
/>

</FrameLayout>


res/drawable/circular_button.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@android:color/white"/>
<stroke android:width="1dp" android:color="#AAA"/>
</shape>


res/drawable/circular_button_ripple_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="@android:id/mask" android:drawable="@drawable/circular_button"/>
<item android:drawable="@drawable/circular_button_selector"/>
</ripple>


res/drawable/circular_button_selector.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/circular_button_selected"/>
<item android:drawable="@drawable/circular_button"/>
</selector>


res/drawable/circular_button_selected.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<solid android:color="@color/theme_accent_color"/>
<stroke android:width="1dp" android:color="#AAA"/>
</shape>


res/anim/button_elevation.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:state_pressed="true">
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="2dip"
android:valueTo="4dip"
android:valueType="floatType" />
</item>
<item>
<objectAnimator
android:duration="@android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueFrom="4dip"
android:valueTo="2dip"
android:valueType="floatType" />
</item>
</selector>


/**
* API 21
* */
public class RippleDrawableActivity extends AppCompatActivity implements View.OnTouchListener{

private ViewGroup buttonsContainer;
private ViewGroup activeButton = null;
private final int MAX_BUTTONS = 3;

private class  CircleOutLineProvider extends ViewOutlineProvider{
@Override
public void getOutline(View view, Outline outline) {
outline.setOval(0,0,view.getWidth(),view.getHeight());
}
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ripple_drawable);

this.buttonsContainer = (ViewGroup) findViewById(R.id.buttonsContainer);

int buttonsSpacing = (int) getResources().getDimension(R.dimen.activity_horizontal_margin);
int buttonSize = (int) getResources().getDimension(R.dimen.button_size);

CircleOutLineProvider circleOutLineProvider = new CircleOutLineProvider();
// Outline circularOutline = new Outline();
// circularOutline.setOval(0, 0, buttonSize, buttonSize);

for (int i = 0; i < MAX_BUTTONS; i++) {
ViewGroup buttonHost = (ViewGroup) getLayoutInflater().inflate(R.layout.circular_button_layout, buttonsContainer, false);
TextView button = (TextView) buttonHost.getChildAt(0);

buttonHost.setClipToOutline(true);
buttonHost.setOutlineProvider(circleOutLineProvider);

button.setText("Test " + i);

buttonHost.setOnTouchListener(this);
buttonsContainer.addView(buttonHost);

//Add margin between buttons manually
if (i != MAX_BUTTONS - 1) {
buttonsContainer.addView(new Space(this), new ViewGroup.LayoutParams(buttonsSpacing, buttonSize));
}
}
selectButton(((ViewGroup) buttonsContainer.getChildAt(0)), false);
}

private void selectButton(ViewGroup buttonHost, boolean reveal) {
selectButton(buttonHost, reveal, buttonHost.getWidth(), buttonHost.getHeight());
}

private void selectButton(ViewGroup buttonHost, boolean reveal, int startX, int startY) {
if (buttonHost == activeButton) {
return;
}

if (activeButton != null) {
activeButton.setSelected(false);
activeButton = null;
}

activeButton = buttonHost;
activeButton.setSelected(true);

View button = activeButton.getChildAt(0);

if (reveal) {
//API 21
ViewAnimationUtils.createCircularReveal(button,
startX,
startY,
0,
button.getHeight()).start();
}
}

@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction()) {
case MotionEvent.ACTION_DOWN:
((ViewGroup) view).getChildAt(0).getBackground().setHotspot(motionEvent.getX(), motionEvent.getY());
break;
case MotionEvent.ACTION_UP:
selectButton((ViewGroup) view, true, (int) motionEvent.getX(), (int) motionEvent.getY());
break;

}
return false;
}
}






参考:http://trickyandroid.com/simple-ripple-reveal-elevation-tutorial/

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