2016-06-11 114 views
1

那么,我最近看到whatsapp和tinder的应用程序。除了按钮之外,“更改个人资料图片”选项也是相同的。我们如何做到这一点?有没有lib?或塑造做到这一点?ImageButton在另一个图像

enter image description here

+0

使用'RelativeLayout'并为图片设置negetive margin –

+0

我会尽力,谢谢你的回答。 – Jorge

+0

@Jorge在下面看到我的答案。 – Ironman

回答

1

使用此代码:

<FrameLayout 
    android:gravity="center" 
    android:layout_centerInParent="true" 
    android:layout_height="wrap_content" 
    android:layout_width="wrap_content" 
    android:paddingBottom="24.0dip" 
    android:paddingLeft="0.5dip" 
    android:paddingRight="0.5dip" 
    android:paddingTop="35.0dip" 
    android:background="#ff26a69a" 
    xmlns:android="http://schemas.android.com/apk/res/android"> 


    <de.hdodenhof.circleimageview.CircleImageView 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/profile_image" 
     android:layout_width="178.0dip" 
     android:layout_height="178.0dip" 
     android:src="@drawable/ic_settings_profile" 
     app:civ_border_width="2dp" 
     app:civ_border_color="#FF000000"/> 


    <ProgressBar 
     style="?android:attr/progressBarStyleInverse" 
     android:id="@+id/change_photo_progress" 
     android:layout_gravity="center" 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:visibility="gone" /> 

    <ImageButton 
     style="@style/ActionBarButtonStyle" 
     android:background="@drawable/input_circle" 
     android:elevation="2.0dip" 
     android:id="@+id/change_photo_btn" 
     android:layout_gravity="bottom|center|right" 
     android:layout_height="52.0dip" 
     android:layout_marginBottom="2.0dip" 
     android:layout_width="52.0dip" 
     android:src="@drawable/ic_cam_white" /> 
</FrameLayout> 

在绘制文件夹

input_circle.xml

<?xml version="1.0" encoding="utf-8"?> 
<selector 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:state_pressed="true" android:drawable="@drawable/input_circle_pressed" /> 
    <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/input_circle_pressed" /> 
    <item android:drawable="@drawable/input_circle_normal" /> 
</selector> 

输出:

enter image description here

+0

谢谢兄弟!这工作正常 – Jorge

+0

@Jorge很高兴帮助你。 – Ironman

0

添加的TextView的imageview的

<FrameLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" 
    android:id="@+id/linearImage" 
    android:layout_weight="1" 
    android:gravity="center" 
    android:layout_alignParentRight="true" 
    android:layout_centerInParent="true" 
    android:layout_marginTop="20dp"> 
    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:id="@+id/imgtimer" 
     android:layout_gravity="center" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentRight="true" 
     android:scaleType="fitCenter" 
     android:src="@drawable/downcounter"/> 
    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_gravity="center" 
     android:gravity="center" 
     android:paddingLeft="6dp" 
     android:paddingRight="6dp" 
     android:layout_marginTop="10dp" 
     android:layout_centerHorizontal="true"> 
    <TextView 
     android:id="@+id/txthourr" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:maxLength="2" 
     android:text="00" 

     android:layout_marginRight="3dp" 
     android:textColor="@color/white" 
     android:paddingRight="2dp" 
     android:textAppearance="?android:attr/textAppearanceMedium" 
     android:textSize="48dp" 
     /> 
     <TextView 
      android:id="@+id/txtcolon" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:maxLength="1" 
      android:text=":" 
      android:textColor="@color/white" 
      android:textSize="40dp" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      android:layout_marginBottom="2dp" 
      /> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/txtminutee" 
      android:maxLength="2" 
      android:textSize="48dp" 
      android:layout_marginLeft="4dp" 
      android:textColor="@color/white" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      android:text="30"/> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/txtsecc" 
      android:maxLength="2" 
      android:layout_marginLeft="4dp" 
      android:textSize="26dp" 
      android:textColor="@color/white" 
      android:layout_marginTop="8dp" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      android:text="00" 
      /> 
    </LinearLayout> 

</FrameLayout> 

enter image description here

0

里面试试这个,alignEnd,alignRight,alignBottom小图像的大图像,并调整边距尺寸按你的图片。

<RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="fill_parent" 
     android:layout_gravity="right|center_vertical"> 

     <de.hdodenhof.circleimageview.CircleImageView 
      android:id="@+id/bigImage" 
      android:layout_centerHorizontal="true" 
      android:layout_marginTop="100dp" 
      android:layout_width="140dp" 
      android:layout_height="140dp" 
      android:background="@drawable/back_image"/> 

     <ImageButton 
      android:id="@+id/small_image" 
      android:layout_width="30dp" 
      android:layout_height="30dp" 
      android:layout_alignEnd="@+id/big_mage" 
      android:layout_alignRight="@+id/big_image" 
      android:layout_alignBottom="@+id/big_image" 
      android:background="@drawable/small_image" 
      android:text="" /> 
</RelativeLayout>