É possível desenhar uma borda em torno de uma visualização de texto?
É possível desenhar uma borda em torno de uma visualização de texto?
Respostas:
Você pode definir uma forma desenhável (um retângulo) como plano de fundo para a vista.
<TextView android:text="Some text" android:background="@drawable/back"/>
E retângulo drawable back.xml (colocado na pasta res / drawable):
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="@android:color/white" />
<stroke android:width="1dip" android:color="#4fa5d5"/>
</shape>
Você pode usar @android:color/transparent
para que a cor sólida tenha um fundo transparente. Você também pode usar preenchimento para separar o texto da borda. para obter mais informações, consulte: http://developer.android.com/guide/topics/resources/drawable-resource.html
Deixe-me resumir alguns métodos diferentes (não programáticos).
Salve o seguinte como um arquivo XML na sua pasta extraível (por exemplo, my_border.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- View background color -->
<solid
android:color="@color/background_color" >
</solid>
<!-- View border color and width -->
<stroke
android:width="1dp"
android:color="@color/border_color" >
</stroke>
<!-- The radius makes the corners rounded -->
<corners
android:radius="2dp" >
</corners>
</shape>
Em seguida, basta defini-lo como plano de fundo para o seu TextView:
<TextView
android:id="@+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/my_border" />
Mais ajuda:
Um patch 9 é uma imagem de plano de fundo extensível. Se você criar uma imagem com uma borda, ela fornecerá uma borda ao TextView. Tudo o que você precisa fazer é criar a imagem e defini-la como plano de fundo no seu TextView.
<TextView
android:id="@+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/my_ninepatch_image" />
Aqui estão alguns links que mostrarão como criar uma imagem de 9 patches:
Usando uma lista de camadas
Você pode usar uma lista de camadas para empilhar dois retângulos um sobre o outro. Ao tornar o segundo retângulo um pouco menor que o primeiro, você pode criar um efeito de borda. O primeiro retângulo (inferior) é a cor da borda e o segundo retângulo é a cor do plano de fundo.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Lower rectangle (border color) -->
<item>
<shape android:shape="rectangle">
<solid android:color="@color/border_color" />
</shape>
</item>
<!-- Upper rectangle (background color) -->
<item android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="@color/background_color" />
</shape>
</item>
</layer-list>
A configuração android:top="2dp"
compensa a parte superior (diminui) em 2dp. Isso permite que o primeiro retângulo (inferior) seja exibido, fornecendo um efeito de borda. Você pode aplicar isso ao plano de fundo do TextView da mesma maneira que o shape
drawable foi feito acima.
Aqui estão mais alguns links sobre listas de camadas:
Usando um patch de 9
Você pode criar uma imagem de 9 patches com uma única borda. Tudo o resto é o mesmo que discutido acima.
Usando uma vista
Isso é meio que um truque, mas funciona bem se você precisar adicionar um separador entre duas visualizações ou uma borda a um único TextView.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textview1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- This adds a border between the TextViews -->
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="@android:color/black" />
<TextView
android:id="@+id/textview2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Aqui estão mais alguns links:
border: 1px solid #999;
não é para ser tão complicado assim.
A maneira mais simples é adicionar uma exibição para o seu TextView. Exemplo para a linha de borda inferior:
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:text="@string/title"
android:id="@+id/title_label"
android:gravity="center_vertical"/>
<View
android:layout_width="fill_parent"
android:layout_height="0.2dp"
android:id="@+id/separator"
android:visibility="visible"
android:background="@android:color/darker_gray"/>
</LinearLayout>
Para as outras bordas da direção, ajuste o local da vista do separador.
Resolvi esse problema estendendo a exibição de texto e desenhando uma borda manualmente. Eu até adicionei para que você possa selecionar se uma borda é pontilhada ou tracejada.
public class BorderedTextView extends TextView {
private Paint paint = new Paint();
public static final int BORDER_TOP = 0x00000001;
public static final int BORDER_RIGHT = 0x00000002;
public static final int BORDER_BOTTOM = 0x00000004;
public static final int BORDER_LEFT = 0x00000008;
private Border[] borders;
public BorderedTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public BorderedTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public BorderedTextView(Context context) {
super(context);
init();
}
private void init(){
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.BLACK);
paint.setStrokeWidth(4);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(borders == null) return;
for(Border border : borders){
paint.setColor(border.getColor());
paint.setStrokeWidth(border.getWidth());
if(border.getStyle() == BORDER_TOP){
canvas.drawLine(0, 0, getWidth(), 0, paint);
} else
if(border.getStyle() == BORDER_RIGHT){
canvas.drawLine(getWidth(), 0, getWidth(), getHeight(), paint);
} else
if(border.getStyle() == BORDER_BOTTOM){
canvas.drawLine(0, getHeight(), getWidth(), getHeight(), paint);
} else
if(border.getStyle() == BORDER_LEFT){
canvas.drawLine(0, 0, 0, getHeight(), paint);
}
}
}
public Border[] getBorders() {
return borders;
}
public void setBorders(Border[] borders) {
this.borders = borders;
}
}
E a classe da fronteira:
public class Border {
private int orientation;
private int width;
private int color = Color.BLACK;
private int style;
public int getWidth() {
return width;
}
public void setWidth(int width) {
this.width = width;
}
public int getColor() {
return color;
}
public void setColor(int color) {
this.color = color;
}
public int getStyle() {
return style;
}
public void setStyle(int style) {
this.style = style;
}
public int getOrientation() {
return orientation;
}
public void setOrientation(int orientation) {
this.orientation = orientation;
}
public Border(int Style) {
this.style = Style;
}
}
Espero que isso ajude alguém :)
Eu estava apenas procurando uma resposta semelhante - ela pode ser feita com um Stroke e a seguinte substituição:
@Override
public void draw(Canvas canvas, MapView mapView, boolean shadow) {
Paint strokePaint = new Paint();
strokePaint.setARGB(255, 0, 0, 0);
strokePaint.setTextAlign(Paint.Align.CENTER);
strokePaint.setTextSize(16);
strokePaint.setTypeface(Typeface.DEFAULT_BOLD);
strokePaint.setStyle(Paint.Style.STROKE);
strokePaint.setStrokeWidth(2);
Paint textPaint = new Paint();
textPaint.setARGB(255, 255, 255, 255);
textPaint.setTextAlign(Paint.Align.CENTER);
textPaint.setTextSize(16);
textPaint.setTypeface(Typeface.DEFAULT_BOLD);
canvas.drawText("Some Text", 100, 100, strokePaint);
canvas.drawText("Some Text", 100, 100, textPaint);
super.draw(canvas, mapView, shadow);
}
Você pode definir a borda por dois métodos. Um é por meio de drawable e o segundo é programático.
<shape>
<solid android:color="@color/txt_white"/>
<stroke android:width="1dip" android:color="@color/border_gray"/>
<corners android:bottomLeftRadius="10dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="10dp"
android:topRightRadius="0dp"/>
<padding android:bottom="0dip"
android:left="0dip"
android:right="0dip"
android:top="0dip"/>
</shape>
Programático
public static GradientDrawable backgroundWithoutBorder(int color) {
GradientDrawable gdDefault = new GradientDrawable();
gdDefault.setColor(color);
gdDefault.setCornerRadii(new float[] { radius, radius, 0, 0, 0, 0,
radius, radius });
return gdDefault;
}
Solução mais simples que encontrei (e que realmente funciona):
<TextView
...
android:background="@android:drawable/editbox_background" />
Eu encontrei uma maneira melhor de colocar uma borda em torno de um TextView.
Use uma imagem de nove correções para o fundo. É bem simples, o SDK vem com uma ferramenta para criar a imagem de 9 patches e não envolve absolutamente nenhuma codificação.
O link é http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch .
Você pode adicionar algo assim no seu código:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke android:width="1dip" android:color="#4fa5d5"/>
</shape>
Verifique o link abaixo para fazer cantos arredondados http://androidcookbook.com/Recipe.seam?recipeId=2318
A pasta de desenho, em res, em um projeto Android não está restrita a bitmaps (arquivos PNG ou JPG), mas também pode conter formas definidas em arquivos XML.
Essas formas podem ser reutilizadas no projeto. Uma forma pode ser usada para colocar uma borda ao redor de um layout. Este exemplo mostra uma borda retangular com cantos curvos. Um novo arquivo chamado customborder.xml é criado na pasta drawable (no Eclipse, use o menu File e selecione New then File, com a pasta drawable selecionada, digite o nome do arquivo e clique em Finish).
O XML que define a forma da borda é inserido:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp"/>
<padding android:left="10dp" android:right="10dp" android:top="10dp" android:bottom="10dp"/>
<solid android:color="#CCCCCC"/>
</shape>
O atributo android:shape
está definido como retângulo (os arquivos de forma também suportam oval, linha e anel). Retângulo é o valor padrão; portanto, esse atributo pode ser deixado de fora se for um retângulo definido. Consulte a documentação do Android sobre formas em http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape para obter informações detalhadas sobre um arquivo de forma.
Os cantos do elemento definem os cantos do retângulo a serem arredondados. É possível definir um raio diferente em cada canto (consulte a referência do Android).
Os atributos de preenchimento são usados para mover o conteúdo da Vista na qual a forma é aplicada, para impedir que o conteúdo se sobreponha à borda.
A cor da borda aqui é definida como cinza claro (valor RGB hexadecimal).
As formas também suportam gradientes, mas isso não está sendo usado aqui. Mais uma vez, consulte os recursos do Android para ver como um gradiente é definido. A forma é aplicada ao layout usandoandroid:background="@drawable/customborder"
.
Dentro do layout, outras visualizações podem ser adicionadas normalmente. Neste exemplo, um único TextView foi adicionado e o texto é branco (FFFFFF hexadecimal RGB). O plano de fundo está definido como azul, mais alguma transparência para reduzir o brilho (valor A00000FF hexadecimal alfa RGB). Finalmente, o layout é deslocado da borda da tela, colocando-o em outro layout com uma pequena quantidade de preenchimento. O arquivo de layout completo é assim:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/customborder">
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Text View"
android:textSize="20dp"
android:textColor="#FFFFFF"
android:gravity="center_horizontal"
android:background="#A00000FF" />
</LinearLayout>
</LinearLayout>
Eu tenho uma maneira de fazê-lo de maneira muito simples e gostaria de compartilhá-lo.
Quando eu quero quadrado mi TextViews, basta colocá-los em um LinearLayout. Defino a cor de fundo do meu LinearLayout e adiciono uma margem ao meu TextView. O resultado é exatamente como se você quadrasse o TextView.
Alterando a resposta de Konstantin Burov, porque não funciona no meu caso:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />
<stroke android:width="2dip" android:color="#4fa5d5"/>
<corners android:radius="7dp"/>
</shape>
</item>
</selector>
compileSdkVersion 26 (Android 8.0), minSdkVersion 21 (Android 5.0), targetSdkVersion 26, implementação 'com.android.support:appcompat-v7:26.1.0', nível: 4.1
Você pode criar um plano de fundo personalizado para sua exibição de texto. Etapas 1. Vá para o seu projeto. 2. Acesse recursos e clique com o botão direito do mouse em drawable. 3. Clique em Novo -> Arquivo de Recursos Drawable 4. Dê um nome ao seu arquivo 5. Cole o seguinte código no arquivo
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="@color/colorBlack" />
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
<corners android:radius="6dp" />
<solid android:color="#ffffffff" />
Para a sua exibição de texto onde você deseja usá-la como backgroud,
android: background = "@ drawable / your_fileName"
Aqui está minha classe auxiliar 'simples' que retorna um ImageView com a borda. Basta colocar isso na sua pasta utils e chamá-lo assim:
ImageView selectionBorder = BorderDrawer.generateBorderImageView(context, borderWidth, borderHeight, thickness, Color.Blue);
Aqui está o código.
/**
* Because creating a border is Rocket Science in Android.
*/
public class BorderDrawer
{
public static ImageView generateBorderImageView(Context context, int borderWidth, int borderHeight, int borderThickness, int color)
{
ImageView mask = new ImageView(context);
// Create the square to serve as the mask
Bitmap squareMask = Bitmap.createBitmap(borderWidth - (borderThickness*2), borderHeight - (borderThickness*2), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(squareMask);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(color);
canvas.drawRect(0.0f, 0.0f, (float)borderWidth, (float)borderHeight, paint);
// Create the darkness bitmap
Bitmap solidColor = Bitmap.createBitmap(borderWidth, borderHeight, Bitmap.Config.ARGB_8888);
canvas = new Canvas(solidColor);
paint.setStyle(Paint.Style.FILL);
paint.setColor(color);
canvas.drawRect(0.0f, 0.0f, borderWidth, borderHeight, paint);
// Create the masked version of the darknessView
Bitmap borderBitmap = Bitmap.createBitmap(borderWidth, borderHeight, Bitmap.Config.ARGB_8888);
canvas = new Canvas(borderBitmap);
Paint clearPaint = new Paint();
clearPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawBitmap(solidColor, 0, 0, null);
canvas.drawBitmap(squareMask, borderThickness, borderThickness, clearPaint);
clearPaint.setXfermode(null);
ImageView borderView = new ImageView(context);
borderView.setImageBitmap(borderBitmap);
return borderView;
}
}
selectionBorder
?
Isso pode ajudá-lo.
<RelativeLayout
android:id="@+id/textbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="@android:color/darker_gray" >
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_margin="3dp"
android:background="@android:color/white"
android:gravity="center"
android:text="@string/app_name"
android:textSize="20dp" />
</RelativeLayout
Crie uma vista de borda com a cor de fundo como a cor da borda e o tamanho da vista de texto. defina o preenchimento da vista da borda como a largura da borda. Defina a cor de fundo da exibição de texto como a cor desejada para a exibição de texto. Agora adicione sua exibição de texto dentro da borda.
Tente o seguinte:
<shape>
<solid android:color="@color/txt_white"/>
<stroke android:width="1dip" android:color="@color/border_black"/>
</shape>
Existem várias maneiras de adicionar uma borda a um textView. O mais simples é criar um drawable personalizado e configurá-lo como android:background="@drawable/textview_bg"
para o seu textView.
O textview_bg.xml irá para Drawables e pode ser algo como isto. Você pode ter um solid
ou um gradient
plano de fundo (ou nada, se não for necessário), corners
para adicionar um raio de canto estroke
adicionar borda.
textview_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="@dimen/dp_10"/>
<gradient
android:angle="225"
android:endColor="#FFFFFF"
android:startColor="#E0E0E0" />
<stroke
android:width="2dp"
android:color="#000000"/>
</shape>
setBackground em seu texto em xml,
adicione o arquivo rounded_textview.xml ao seu diretório drawable.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="@android:color/white" />
<stroke android:width="2dip" android:color="#4f5g52"/>
</shape>
definir arquivo drawable em segundo plano textView.
Na verdade, é muito simples. Se você deseja um simples retângulo preto atrás do Textview, basta adicionar android:background="@android:color/black"
dentro das tags TextView. Como isso:
<TextView
android:textSize="15pt" android:textColor="#ffa7ff04"
android:layout_alignBottom="@+id/webView1"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="@android:color/black"/>