2

Como faço para criar um layout exatamente como este (O layout são iguais tanto o da esquerda como o da direita):

Vou explicar como pretendo fazer isto e se possível me ajudem pois não sei como fazer desse jeito:

Eu estou navegando no meu app e aperto um botão que vai para a tela de imagens. Esta tela de imagens está vazia. Então eu aperto o ícone na action bar para tirar foto, tiro a foto e quando eu acabar de tirar a foto, volto para a tela de imagens que antes estava vazia e agora fica igual esta imagem acima, só que aparecendo apenas uma imagem com uma descrição abaixo. Esta descrição estaria vazia e eu a colocaria depois que a foto fosse tirada. Agora eu aperto o botão de tirar foto novamente e ocorre o mesmo processo só que ao invés de ter uma imagem, teríamos agora duas imagens e assim por diante.

Como eu posso fazer isso?

3
  • @bigown quando uma pergunta estiver resolvida eu não preciso colocar Resolvido no título?
    – Ghost
    Commented 13/05/2014 às 18:17
  • 1
    Não. Isso não é recomendado aqui, pleocontrário. Colocar "resolvido" é comum em fóruns, mas somos um site de perguntas e respostas. O que é ideal, mas não obrigatório, é escolher uma resposta certa, como você fez. Evidentemente não vai escolher uma resposta se nenhuma pode ser considerada como a melhor postada. Você pode até escolher a sua resposta se achar que ela é a melhor. Ou pode preferir de outra pessoa mesmo que tenha dado a sua resposta. Vai do caso específico.
    – Maniero
    Commented 13/05/2014 às 18:32
  • 1
    Ok. Entendi a diferença. Obrigado pela aviso.
    – Ghost
    Commented 13/05/2014 às 18:36

2 Respostas 2

3

Para fazer isso: Você precisa utilizar um GridView com duas colunas, poderia utilizar um StaggeredGridView (etsy StagerredGridView) caso as imagens possuam alturas diferentes, mas não é o caso.

Para fazer uma imagem quadrada, dou a sugestão dessa subclasse do ImageView:

public class SquareImageView extends ImageView {
    public SquareImageView(Context context) {
        super(context);
    }

    public SquareImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth()); //Snap to width
    }
}

Ela força que a altura da imagem tenha o mesmo comprimento da largura.

Para o layout da view, recomendo a seguir:

<GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchMode="columnWidth"
        android:numColumns="2" />

Para o layout do item dentro do GridView:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <SquareImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Fulaninho"
        android:textColor="@color/white"
        android:ellipsize="end"
        android:lines="2"
        android:gravity="center_vertical"
        android:fontFamily="sans-serif-light"
        android:background="#99000000" />
</FrameLayout>

Nesse caso a imagem será escalada mantendo o Aspect Ratio. É claro que faltam alguns detalhes, mas o grosso é esse ai.

Ah, não comentei sobre adicionar imagens dinâmicamente no GridView e como acessar os recursos da câmera, mas acredito que a pergunta foi sobre o layout.

7
  • @Walkim obrigado pela explicação. Fiquei com algumas dúvidas ainda. Por que usar essa subclasse de ImageView para forçar uma imagem quadrada? Para forçar uma imagem quadrada eu não precisaria apenas definir a largura e altura iguais do image view? Por exemplo: 50dp de width e 50 de height? Qual a diferença dessa sua subclasse para isto que estou dizendo? Minha dúvida é realmente sobre o layout, quanto a acessar os recursos da câmera eu já tenho aqui. Inflar layout dinamicamente também sei, porém não sei como vou garantir que eu só posso ter duas imagens por linha.
    – Ghost
    Commented 8/05/2014 às 15:56
  • Sim, poderia, porém ao fixar, não é sei se é "escalável" para todos os tamanhos de tela (tablet inclusive), pode ser que a imagem fique cortada ou com espaço em branco. É melhor deixar o imageview resolver isso pra você. Além disso, não dá pra adivinhar o tamanho da imagem que virá da câmera né? O usuário pode escolher qualquer resolução acho.
    – Wakim
    Commented 8/05/2014 às 15:59
  • Entendi. Vou tentar com esta subclasse então. Se funcionar com uma imagem volto aqui para dizer como ficou e se preciso de mais ajuda.
    – Ghost
    Commented 8/05/2014 às 16:01
  • Fiz algo parecido com oque você esta querendo se conseguir posta ae os resultados! eu utilizei fazendo um Image View para escalar com o tamanho da tela e mantendo formato e utilizei a seguinte propriedade e funcionou imageView2.setScaleType(ImageView.ScaleType.FIT_XY); imageView2.setImageURI(selectedImageUri);
    – Guilherme
    Commented 9/05/2014 às 10:59
  • @Guilherme, se for pra expandir a imageview mas com o aspect ratio, da uma olhada no atributo adjustViewBounds, ele é false por default, deve ajudar nesse caso também.
    – Wakim
    Commented 9/05/2014 às 11:07
0

Consegui fazer o layout graças a ajuda do @Walkim, segui seu exemplo modificando de acordo com minhas necessidades. Primeiramente eu quis o layout como o da pergunta, porém precisei fazer modificações e o meu layout ficou como vou mostrar para vocês.

fragment_imagem_instrumento.xml

<GridView
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:layout_margin="5dp"
    android:numColumns="2"/>

<TextView
    android:id="@+id/textViewSemDados"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:text="@string/sem_dados"
    android:textColor="#FFFFFF"
    android:textSize="20sp"/>

Este Layout acima se refere ao layout principal do Fragment onde tem um GridView que será preenchido dinamicamente com um CustomAdapter meu. O TextView serve apenas para exibir o texto "Sem Dados" quando não houver dados disponíveis a serem exibidos. Quando houver eu sumo com o TextView.

Cada item do GridView assume a forma de um ImageView com um CheckBox para ser marcado a imagem ou não. Vamos ver agora o layout de cada item do GridView.

item_imagem_instrumento.xml

<?xml version="1.0" encoding="utf-8"?>

<nome.do.meu.pacote.SquareImageView
    android:id="@+id/squareImageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="0dp"
    android:layout_alignParentTop="true"
    android:layout_marginTop="0dp"/>

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/checkBoxImagemSelecionada"/>

Para preencher o GridView usei um CustomAdapter implementando o padrão ViewHolder. Estou apenas informando isto aqui caso alguém queira saber como preenchi dinamicamente pois minha dúvida na realidade era quanto ao layout e não ao preenchimento, pois isso já sabia fazer. Observem que eu não deixei as imagens coladas umas nas outras como queria primeiramente pois achei que ficou ruim assim, e também dei um espaço de cada uma da janela principal. Agora vamos ver como ficou na prática todo este layout?

Sem nenhuma imagem disponível...

Quando não tem nenhuma imagem disponível


Com uma imagem disponível...

Quando se tem uma imagem disponível


Com duas imagens disponíveis...

inserir a descrição da imagem aqui


Com quatro imagens disponíveis...

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .