Android实现浮动按钮半遮盖ImageView中的图片
来源:互联网 发布:淘宝买号 编辑:程序博客网 时间:2024/06/05 11:35
如果想要实现如下图所示效果:
Android给我们提供了CoordinatorLayout+layout_anchor的方式来实现。
但由于图片所在的ImageView其scaleType="fitStart"(该属性是为了实现图片宽与屏幕宽相等的情况下,对图片高度进行同比例的缩放)
所以我们发现CoordinatorLayout+layout_anchor失效了,按钮所处的位置可能处于预想位置的偏下位置。
这是因为ImageView的scaleType="fitStart",所以图片的高度经过调整,导致与ImageView的实际高度并不同,
进而以该ImageView为锚点的按钮图片显示的位置也就不在准确了。
下面提供两种解决方法:
1.依旧使用anchor的方式:(CoordinatorLayout布局的情况下)
setContentView(R.layout.anchor_activity); Bitmap btImageIcon = getImageFromAssetsFile(getResources(), "main_img.jpg"); ImageView img_icon = (ImageView) this.findViewById(R.id.main_show); img_icon.setImageBitmap(btImageIcon); int screenWidth = screenWidth(this); int picHeight = (int)(screenWidth*0.625); //0.625是这张图片的高宽比 CoordinatorLayout.LayoutParams mainPic_lp = (CoordinatorLayout.LayoutParams)findViewById(R.id.main_show).getLayoutParams(); mainPic_lp.height = picHeight; //将图片所在的ImageView高度设置为图片经过调整后的高度 CoordinatorLayout.LayoutParams goodBt_lp = (CoordinatorLayout.LayoutParams)findViewById(R.id.fab).getLayoutParams(); //获取按钮的LayoutParams goodBt_lp.setAnchorId(R.id.main_show); //设置按钮的锚点ID goodBt_lp.anchorGravity = Gravity.BOTTOM|Gravity.END; //设置按钮的位置
2.使用坐标位置的方式(FrameLayout布局的情况下)
setContentView(R.layout.layoutparamas_activity); Bitmap btImageIcon = getImageFromAssetsFile(getResources(), "main_img.jpg"); ImageView img_icon = (ImageView) this.findViewById(R.id.main_show); img_icon.setImageBitmap(btImageIcon); int screenWidth = screenWidth(this); //获取屏幕宽度,单位为px int picHeight = (int)(screenWidth*0.625); //由于布局中ImageView的scaleType="fitStart",所以图片长宽比保持了原样, //并且由于图片宽度等于屏幕宽度,所以可以求得图片的最终显示高度。 FrameLayout.LayoutParams mainPic_lp = (FrameLayout.LayoutParams)findViewById(R.id.main_show).getLayoutParams(); mainPic_lp.height = picHeight; //通过上述语句改变ImageView的高度, //此处改高度是由于ImageView的scaleType="fitStart",所以图片的高度由于经过调整,导致与ImageView的实际高度并不同 //不加的话图片将不会处于填满ImageView的状态,可能会有一部分空出来,不过如果ImageView背景透明的话不影响显示效果。 FrameLayout.LayoutParams goodBtPic_lp = (FrameLayout.LayoutParams)findViewById(R.id.good_bt).getLayoutParams(); goodBtPic_lp.topMargin = picHeight-dip2px(this,70/2); //这里设置按钮的高度坐标为:图片高度-按钮高/2 //这样就实现了按钮半遮盖图片效果
完整代码如下:
MainActvity.java:
public class MainActivity extends AppCompatActivity { private int whitchActivity = 1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if(whitchActivity == 1) { setLayoutParamasActivity(); }else if (whitchActivity == 2){ setAnchorActivity(); } } private void setLayoutParamasActivity(){ setContentView(R.layout.layoutparamas_activity); Bitmap btImageIcon = getImageFromAssetsFile(getResources(), "main_img.jpg"); ImageView img_icon = (ImageView) this.findViewById(R.id.main_show); img_icon.setImageBitmap(btImageIcon); int screenWidth = screenWidth(this); //获取屏幕宽度,单位为px int picHeight = (int)(screenWidth*0.625); //由于布局中ImageView的scaleType="fitStart",所以图片长宽比保持了原样, //并且由于图片宽度等于屏幕宽度,所以可以求得图片的最终显示高度。 FrameLayout.LayoutParams mainPic_lp = (FrameLayout.LayoutParams)findViewById(R.id.main_show).getLayoutParams(); mainPic_lp.height = picHeight; //通过上述语句改变ImageView的高度, //此处改高度是由于ImageView的scaleType="fitStart",所以图片的高度由于经过调整,导致与ImageView的实际高度并不同 //不加的话图片将不会处于填满ImageView的状态,可能会有一部分空出来,不过如果ImageView背景透明的话不影响显示效果。 FrameLayout.LayoutParams goodBtPic_lp = (FrameLayout.LayoutParams)findViewById(R.id.good_bt).getLayoutParams(); goodBtPic_lp.topMargin = picHeight-dip2px(this,70/2); //这里设置按钮的高度坐标为:图片高度-按钮高/2 //这样就实现了按钮半遮盖图片效果 } private void setAnchorActivity(){ setContentView(R.layout.anchor_activity); Bitmap btImageIcon = getImageFromAssetsFile(getResources(), "main_img.jpg"); ImageView img_icon = (ImageView) this.findViewById(R.id.main_show); img_icon.setImageBitmap(btImageIcon); int screenWidth = screenWidth(this); int picHeight = (int)(screenWidth*0.625); CoordinatorLayout.LayoutParams mainPic_lp = (CoordinatorLayout.LayoutParams)findViewById(R.id.main_show).getLayoutParams(); mainPic_lp.height = picHeight; //将图片所在的ImageView高度设置为图片经过调整后的高度 CoordinatorLayout.LayoutParams goodBt_lp = (CoordinatorLayout.LayoutParams)findViewById(R.id.fab).getLayoutParams(); //获取按钮的LayoutParams goodBt_lp.setAnchorId(R.id.main_show); //设置按钮的锚点ID goodBt_lp.anchorGravity = Gravity.BOTTOM|Gravity.END; //设置按钮的位置 } public Bitmap getImageFromAssetsFile(Resources res, String fileName){ Bitmap image = null; try{ InputStream is = res.getAssets().open(fileName); image = BitmapFactory.decodeStream(is); is.close(); }catch (IOException e){ e.printStackTrace(); } return image; } public int screenWidth(Context context){ int width = context.getResources().getDisplayMetrics().widthPixels; return width; } public int dip2px(Context context, float dpValue) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); }}
anchor_activity.xml:
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="com.lla.mainpagewithbutton.MainActivity"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/main_show" android:scaleType="fitStart" android:background="@color/colorPrimary"/> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" app:layout_anchor="@id/main_show" app:layout_anchorGravity="bottom|end" android:src="@android:drawable/ic_dialog_email"/></android.support.design.widget.CoordinatorLayout>
layoutparamas_activity.xml:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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" tools:context="com.lla.mainpagewithbutton.MainActivity"> <FrameLayout android:id="@+id/showImage" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/main_show" android:scaleType="fitStart" android:background="@color/colorPrimary"/> <ImageView android:id="@+id/good_bt" android:layout_width="70dp" android:layout_height="70dp" android:layout_marginRight="5dp" android:layout_gravity="right" android:src="@drawable/good" /> </FrameLayout></RelativeLayout>
0 0
- Android实现浮动按钮半遮盖ImageView中的图片
- android 拖动图片/拖动浮动按钮
- html实现图片遮盖
- Android之实现手势缩放imageview中的图片
- Android ImageView实现图片切换
- Android imageview图片缩放实现
- Android 控件之四:ImageView 图片框,ImageButton 图片按钮
- Android开发获取ImageView中的图片
- android 中的ImageView(图片)小例子
- android 拖拽图片&拖动浮动按钮到处跑
- android 拖拽图片&拖动浮动按钮到处跑
- android 拖拽图片&拖动浮动按钮到处跑
- 实现浮动按钮
- 浮动按钮的实现
- Android中的ListView实现图片文字和按钮
- android ImageView 详解----按钮控制图片缩放(三)
- android 浮动按钮
- Android中浮动按钮
- 雷霄骅---巨星陨落
- Jenkins自动打包配置
- 雷霄骅---巨星陨落
- UVA 1396
- DataRow各种琐事
- Android实现浮动按钮半遮盖ImageView中的图片
- 我的职场-前序
- 学习笔记 - OLAP 中等级(level) 和 层次(Hierarchy)之间的关系
- Android Studio安装MonkeyTalk Agent小记
- org.hibernate.LazyInitializationException解决办法
- android web view
- android web view的学习 1
- eclipse为SSH框架.xml文件添加自动提示功能
- c++之封装——string类型的实现