Android 具有配置文件图片对齐的按钮布局
我想创建与图片中类似的按钮。在圆圈内（在png中是透明的），我想放置玩家的个人资料图片。蓝色条上也应该有文本。 我已经让它工作了，但它似乎太复杂了。我认为在不给出代码的情况下更容易理解我所做的事情，但是如果您需要它，我可以添加它。布局如下：Android 具有配置文件图片对齐的按钮布局,android,xml,layout,Android,Xml,Layout,我想创建与图片中类似的按钮。在圆圈内（在png中是透明的），我想放置玩家的个人资料图片。蓝色条上也应该有文本。 我已经让它工作了，但它似乎太复杂了。我认为在不给出代码的情况下更容易理解我所做的事情，但是如果您需要它，我可以添加它。布局如下： 相对论 线性布局（水平方向） 权重为0.7的空视图 权重为0.2的配置文件图片 权重为0.1的空视图 我贴在下面的覆盖图片 线性布局（水平方向） 权重为0.7的RelativeLayout（所有文本可以到达的空间） 权重为0.3的空视图 顺
- 相对论
- 线性布局（水平方向）
- 权重为0.7的空视图
- 权重为0.2的配置文件图片
- 权重为0.1的空视图
- 我贴在下面的覆盖图片
- 线性布局（水平方向）
- 权重为0.7的RelativeLayout（所有文本可以到达的空间）
- 权重为0.3的空视图
- 线性布局（水平方向）
非常感谢无需任何图像即可完成： 布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:weightSum="1.0">
<TextView
android:layout_weight="0.7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="New Text"
android:id="@+id/textView"
android:background="#0073ff"/>
<ImageView
android:layout_weight="0.2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="@drawable/half_round_drawable"
android:src="@drawable/profile"/>
</LinearLayout>
</LinearLayout>
半圆形可拉深：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval">
<corners android:radius="16dp" />
<solid android:color="#0073ff" />
</shape>
</item>
<item
android:bottom="0dp"
android:right="32dp"> <!-- radius *2 -->
<shape>
<solid android:color="#0073ff" />
</shape>
</item>
</layer-list>
如果将背景图像限制在右侧的轮廓区域，则可以使用简单的
线性布局。如果使用可绘制的九面片，则可以在图像本身中定义内容区域，如下所示：
从背景图像文件中提取配置文件部分
创建一个可从中绘制的九个面片，将所有区域定义为可拉伸（左侧和顶部边界线），并将空圆定义为内容区域（右侧和底部边界线）
由于理想情况下，您应该将图像放在前景层，以确保照片不会绘制在圆之外，因此您可以使用具有前景绘制功能的框架布局
，以包含个人资料照片的图像视图
。还需要另一个虚拟子视图来处理导致父维度不正确的单个子维度布局的inFrameLayout
这是布局最后的样子：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00f" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:foreground="@drawable/profile_bg">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageView
android:id="@+id/photo"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</LinearLayout>
现在我准备给出我的答案
- 波特雷特：
- 景观：
Layout.xml：
Attr.xml：
希望它能帮助您。今天您将看到解决方案。等等，如果我理解正确的话，这正是我想要的。我想问你，你对恩的回答有什么看法，这个回答似乎也很好。该解决方案的唯一缺点是，它的形状灵活性不如9个补丁？因此，如果我100%确信我的设计总是如此简单，以至于可以用形状来创建，我会采用他的解决方案？@DominicM:Eun的解决方案也可以，尺寸和填充在可绘制的形状中定义。在这种情况下，圆圈将不透明，因此前景技巧在那里不起作用，但正如他建议的那样，您可以使用RoundedImageView
。但如果从默认尺寸缩放，则无法正确绘制。如果这是一个问题，它仍然可以通过使用clip
drawable来解决，而不是硬编码第二个形状的宽度/插图，并将可绘制级别从代码设置为5000（50%）。@DominicM:另一个选项是在布局本身中执行此操作，通过在TextView
的右侧添加负边距和填充，使圆的半径相等。与定义了适当边界的RoundedImageView
相结合，也会产生所需的结果。这也会受到与shape
可绘制解决方案相同的限制。如果您使用的是自定义视图，那么您最好让它自己实现整个绘制逻辑，而不是在标准容器上硬编码一些调整。您定义的所有三个属性都已存在，或者可以从现有属性推断出来。另外，为什么要从onDraw（）
方法修改布局属性，然后调用requestLayout（）
？这将导致一个无限循环的绘图和布局。我可以创建如果布拉布拉。这是样品。为什么是requestLayout，因为在连接到布局时，该视图的移动很小。不幸的是，这是一个错误的答案。但是为什么要从onDraw（）内部更改布局呢？理想情况下，应将其移至onMeasure（）
。onDraw（）
方法应该是轻量级的，并且没有副作用，正如我提到的，从那里调用requestLayout（）
将导致一个无休止的循环。我知道。但是当我试图将其放入onMeasure（）
中时，什么都没有发生。在调用onMeasure（）
的超级实现之前，您需要更改布局参数才能产生任何效果。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:shape="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<!--This is the CustomView which include -->
<!--own attributes: -->
<!--circle_radius is the radius of image, -->
<!--content_padding is the padding,-->
<!--and background_color is the color of shape.-->
<CustomShape
android:layout_width="match_parent"
android:layout_height="wrap_content"
shape:circle_radius="40dp"
shape:content_padding="8dp"
shape:background_color="#FF983493">
<!--There must be two Views:-->
<!--TextView and ImageView and only in this order.-->
<!--Set-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--to bot of them, because in CustomShape it will be-->
<!--resized for you. There also don`t need to set -->
<!--any kind of margin or location attributes.-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/txt"
android:padding="5dp"
android:textColor="@android:color/white"
android:text="sdsfkjsdkfhsdk flsdkfjkls asdfasd fklasdjl fkjasdklfjasd k "
android:background="@android:color/transparent"/>
<!--For RoundImage I use custom class which round the drawable,-->
<!--not a View. Look down.-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/img"
android:src="@drawable/img"
android:scaleType="fitCenter"
android:background="@android:color/transparent" />
</CustomShape>
</RelativeLayout>
public class CustomShape extends RelativeLayout {
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
int circleRadius; // image radius
int diameter; // image diameter
int contentPadding;
int semiPadding;
int rectRightSide;
int backgroundColor;
int viewWidth; // width of parent(CustomShape layout)
public CustomShape(Context context) {
super(context);
this.setWillNotDraw(false);
}
public CustomShape(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CustomShape, 0, 0);
try {
this.circleRadius = (int) ta.getDimension(R.styleable.CustomShape_circle_radius, 40);
this.contentPadding = (int) ta.getDimension(R.styleable.CustomShape_content_padding, 8);
this.backgroundColor = ta.getColor(R.styleable.CustomShape_background_color, 0);
this.semiPadding = contentPadding / 2;
this.diameter = circleRadius * 2;
} finally {
ta.recycle();
}
this.setWillNotDraw(false);
}
public CustomShape(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.setWillNotDraw(false);
}
@Override
protected void onSizeChanged(int xNew, int yNew, int xOld, int yOld) {
super.onSizeChanged(xNew, yNew, xOld, yOld);
viewWidth = xNew;
this.rectRightSide = viewWidth - circleRadius - (circleRadius / 2); // get position for image
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
ImageView img = (ImageView) this.getChildAt(1);
RelativeLayout.LayoutParams imgParams = new LayoutParams(diameter - contentPadding, diameter - contentPadding);
imgParams.leftMargin = rectRightSide - circleRadius + semiPadding;
imgParams.topMargin = semiPadding;
img.setLayoutParams(imgParams);
//Create custom RoundImage and set to image
try {
Drawable drawable = img.getDrawable();
Bitmap bm = ((BitmapDrawable) drawable).getBitmap();
RoundImage resultImage = new RoundImage(bm);
img.setImageDrawable(resultImage);
} catch (ClassCastException e) {
}
//Positioning and resizing TextView
View txt = this.getChildAt(0);
RelativeLayout.LayoutParams txtParams = new LayoutParams(rectRightSide - circleRadius - semiPadding, diameter - contentPadding);
txtParams.topMargin = semiPadding;
txtParams.leftMargin = semiPadding;
txt.setLayoutParams(txtParams);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
this.setMeasuredDimension(parentWidth, diameter); // set correct height
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paint.setColor(backgroundColor);
canvas.drawRect(0, 0, rectRightSide, diameter, paint);
//Draw circle
paint.setDither(true);
canvas.drawCircle(rectRightSide, circleRadius, circleRadius, paint);
}
}
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomShape">
<attr name="circle_radius" format="dimension" />
<attr name="content_padding" format="dimension" />
<attr name="background_color" format="color" />
</declare-styleable>
</resources>
public class RoundImage extends Drawable {
private final Bitmap mBitmap;
private final Paint mPaint;
private final RectF mRectF;
private final int mBitmapWidth;
private final int mBitmapHeight;
public RoundImage(Bitmap bitmap) {
mBitmap = bitmap;
mRectF = new RectF();
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
final BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mPaint.setShader(shader);
mBitmapWidth = mBitmap.getWidth();
mBitmapHeight = mBitmap.getHeight();
}
@Override
public void draw(Canvas canvas) {
canvas.drawOval(mRectF, mPaint);
}
@Override
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
mRectF.set(bounds);
}
@Override
public void setAlpha(int alpha) {
if (mPaint.getAlpha() != alpha) {
mPaint.setAlpha(alpha);
invalidateSelf();
}
}
@Override
public void setColorFilter(ColorFilter cf) {
mPaint.setColorFilter(cf);
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
@Override
public int getIntrinsicWidth() {
return mBitmapWidth;
}
@Override
public int getIntrinsicHeight() {
return mBitmapHeight;
}
public void setAntiAlias(boolean aa) {
mPaint.setAntiAlias(aa);
invalidateSelf();
}
@Override
public void setFilterBitmap(boolean filter) {
mPaint.setFilterBitmap(filter);
invalidateSelf();
}
@Override
public void setDither(boolean dither) {
mPaint.setDither(dither);
invalidateSelf();
}
public Bitmap getBitmap() {
return mBitmap;
}
}