RippleDrawable
2015-11-12 16:43
381 查看
public class
RippleDrawable Added
extends LayerDrawable
RippleDrawable Added
in API
level 21
extends LayerDrawablejava.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/ |
相关文章推荐
- 3.nginx学习笔记:nginx配置反向代理服务器
- asp.net mvc 发送邮箱验证码
- NetBeans中文乱码解决办法
- 四、信号
- AndroidUI中gravity属性的运用
- 苹果IOS开发者账号总结
- HDU 2544 最短路
- 【tornado】localhost与127.0.0.1设置cookie的异同
- VectorDrawable与AnimatedVectorDrawable
- NinePatchDrawable
- 黑马程序员--反射
- 转一些经典的SQL语句
- $.ajax()方法详解
- codeforces #302 Remembering Strings (dp)
- 框架搭建-SSI搭建步骤详解
- AlarmManager的一些方法
- 苹果公司开发者账号注册流程详解
- python编码知识点(倒序更新)
- zcmu1672
- PERMISSION_UNFINISHED