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