2012-08-30 14:13:29 iteye_8352 阅读数 165

在RelativeLayout中,想要layout中的各种控件相对于父RelativeLayout为居中对齐,一般情况下,我们可以设置RelativeLayout的layout_gravity="center",如下代码:

 

<RelativeLayout 
	 		        android:layout_width="fill_parent"
	 		        android:layout_height="wrap_content"
	 		        android:background="@drawable/insurance_kinds_bg"
	 		        android:gravity="center">
	 		        <TextView 
	 		            android:layout_width="wrap_content"
	 		            android:layout_height="wrap_content"
	 		            android:text="待选配件列表"
	 		            android:textSize="18px"
	 		            android:textColor="@color/red"
	 		            android:layout_centerVertical="true"
	 		            android:layout_alignParentLeft="true"/>
	 		        <Button 
	 		            android:layout_width="wrap_content"
	 		            android:layout_height="wrap_content"
	 		            android:text="添加>>"
	 		            android:textSize="18px"
	 		            android:layout_centerVertical="true"
	 		            android:layout_alignParentRight="true"/>
	 		    </RelativeLayout>
   

但在实际使用时,TextView和Button并不能放在中间,即layout_gravity=“center”并未起到作用。要想作居中显示,不能在RelativeLayout中设置layout_gravity="center",而是应该在每个子view中进行设置,如下

 

<RelativeLayout 
	 		        android:layout_width="fill_parent"
	 		        android:layout_height="wrap_content"
	 		        android:background="@drawable/insurance_kinds_bg"
	 		        android:gravity="center">
	 		        <TextView 
	 		            android:layout_width="wrap_content"
	 		            android:layout_height="wrap_content"
	 		            android:text="待选配件列表"
	 		            android:textSize="18px"
	 		            android:textColor="@color/red"
	 		            android:layout_centerVertical="true"
	 		            android:layout_alignParentLeft="true"/>
	 		        <Button 
	 		            android:layout_width="wrap_content"
	 		            android:layout_height="wrap_content"
	 		            android:text="添加>>"
	 		            android:textSize="18px"
	 		            android:layout_centerVertical="true"
	 		            android:layout_alignParentRight="true"/>
	 		    </RelativeLayout>
 

这样即可达到想要的效果

2018-10-01 09:32:08 julicliy 阅读数 294

一,LinearLayout 的特性不支持居中对齐

二,其他的布局方式可以的,比如Frame布局

2017-04-10 17:20:55 a369414641 阅读数 5683

一. 概述

众所周知,Android图文混排可以通过SpannableString来实现,通过在相应位置使用ImageSpan替换即可,但是使用过的人会发现,imageSpan只提供了两种对齐方式,如下所示:

    /**
     底部对齐
     */
    public static final int ALIGN_BOTTOM = 0;

    /**
     基线对齐
     */
    public static final int ALIGN_BASELINE = 1;

但是在大多数时候,我们希望实现图片的中点和文字的中点对齐(视觉设计师肯定会给到这样的要求),那么该怎么办呢?

二. 图文混排,图片居中对齐方案

方案1:

一个比较简单解决方案就是让图片和文字的高度保持一致,这样就变相居中对齐了,那么有一些朋友为难了,视觉给的图片的高度比字体的高度小,这肿么办? 这个问题很好解决,让视觉给你切大一点的图片,即在原来的图片上多切一些透明的白边。(是不是恍然大悟?哈哈)

plus:图片比文字高的情况根本不需要居中对齐。

方案2:

程序员肯定有程序员的方案,那就是扩展继承ImageSpan,重写它的onDraw()方法。这个方案本人参考了网上的一些解决方案,但是都有局限性,有些方案只要设置的TextView行间距或者padding就不能正常工作了。

比如,这篇博客:Android ImageSpan使TextView的图文居中对齐

这篇博客的方案,在设置了行间距的时候,就出现问题了。但是这篇博客把字体绘制的原理说的很清楚了,建议大家先读这篇博客,再来理解本人的做法。

代码展示

好了,直接上代码,这是自定义ImageSpan的代码,非常少。主要的原理是把图片绘制在字体的descent线和ascent的中点位置。还是那句话,先看上面那篇博客。

public class CenterAlignImageSpan extends ImageSpan {

    public CenterAlignImageSpan(Drawable drawable) {
        super(drawable);

    }

    public CenterAlignImageSpan(Bitmap b) {
        super(b);
    }

    @Override
    public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
            @NonNull Paint paint) {

        Drawable b = getDrawable();
        Paint.FontMetricsInt fm = paint.getFontMetricsInt();
        int transY = (y + fm.descent + y + fm.ascent) / 2 - b.getBounds().bottom / 2;//计算y方向的位移
        canvas.save();
        canvas.translate(x, transY);//绘制图片位移一段距离
        b.draw(canvas);
        canvas.restore();
    }
}

使用和运行效果

在布局文件里放置一个TextView,设置其行间距。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:gravity="center"
    tools:context="com.example.hzwangqinwei.test.MainActivity"
    >

    <TextView
        android:id="@+id/test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#aeae34"
        android:gravity="center"
        android:lineSpacingExtra="40dp"
        android:textSize="70dp"
        />

</LinearLayout>

activity里的代码如下展示:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView tv = (TextView) findViewById(R.id.test);

        SpannableString sp = new SpannableString("图文混排测排测试图文混排测试图文混排测试图文混排测试图");

        //获取一张图片
        Drawable drawable = getDrawable(R.drawable.star);
        drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

        //居中对齐imageSpan
        CenterAlignImageSpan imageSpan = new CenterAlignImageSpan(drawable);
        sp.setSpan(imageSpan, 0, 1, ImageSpan.ALIGN_BASELINE);

        //普通imageSpan 做对比
        ImageSpan imageSpan2 = new ImageSpan(drawable);
        sp.setSpan(imageSpan2, 3, 4, ImageSpan.ALIGN_BASELINE);

        tv.setText(sp);
    }
}

运行效果,第二张图片是普通的ImageSpan的效果,这里加入进来是做一个对比。
image

2016-06-06 10:33:05 gzh8579 阅读数 1975

做了一个底部导航栏,使用的RadioButton,类似微信那种,遇到一个不居中的问题,最后发现很简单的一个tip。
Radio背景图片和文字居中
在编辑器上运行显示是正确的样式,安装到模拟器上运行就是不ok的,请看对比:
编辑器上运行显示位置都是预期的:
编辑器上的:
安装到模拟器上效果如下,图片和文字相对RadioButton是右对齐的
模拟器上:
查了很久,发现说是这个属性都是右对齐:
android:drawableTop=”@drawable/img_1”

解决办法:
在RadioGroup属性中添加背景图片即可赋值null即可:

这个是我RadioButton的风格属性,供参考,注意android:background:

    <!--底部导航栏radio风格-->
    <style name="tab_bottom">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:textSize">16dp</item>
        <item name="android:layout_weight">1.0</item>
        <item name="android:background">@null</item>
        <item name="android:paddingTop">2dp</item>
        <item name="android:textColor">@drawable/bottom_textcolor</item>
        <item name="android:singleLine">true</item>
        <item name="android:button">@null</item>
    </style>

修改完成之后,在运行就是ok的预期效果了:

2019-02-18 16:37:06 jian11058 阅读数 2339

本来relalayout中有个底部对齐是否选项,线性布局中没有,但是,在线性布局中需要,那么如此操作即可:


android:layout_height="0dp" 
android:layout_weight="1"

没有更多推荐了,返回首页