4

Estou implementando um aplicativo de perguntas e respostas.

Para a minha listagem eu estou utilizando um RecyclerView em que carrego diversos CardViews (provenientes do carregamento de uma lista). Cada CardView mostra uma pergunta. Abaixo do texto da pergunta eu quero mostrar a minha lista de alternativas. Não existe um limite de alternativas, então eu não vou poder deixar isso fixo no meu layout.

É aqui que está o problema. Eu consigo carregar os CardViews com o texto das perguntas mas ainda não consegui carregar a lista de alternativas, apesar de conseguir imprimi-las no Console logo após o carregamento de cada pergunta.

Não sei se vou conseguir explicar muito bem somente com as palavras, então vou mostrar como está a minha estrutura e o que eu queria fazer. A imagem abaixo mostra como o meu aplicativo está e o que eu já consegui fazer:

Como está atualmente

A imagem abaixo mostra o que eu preciso fazer agora (que é o motivo de eu estar realizando esta pergunta).

O que preciso fazer agora

Em uma outra pergunta que fiz fui orientado a inserir um outro RecyclerView no layout do meu CardView. Eu tentei realizar isso mas quando rodo o aplicativo recebo um monte de erros, como mostra esse print que tirei do Console:

Erros Console

Um outro usuário do StackOverflow precisou fazer algo semelhante e também deparou com esses erros. Ele foi orientado a especificar a altura do do RecyclerView, coisa que eu também fiz mas os erros continuam.

Também devo mencionar como está a minha estrutura para realizar o carregamento dos CardViews.

Como eu estou usando RecyclerView, tive que criar uma classe Adapter que extende da classe RecyclerView.Adapter. Para carregar os cards eu tive que "inflá-lo" em um método chamado onCreateViewHolder:

@Override
public MyViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
    View v = mLayoutInflater.inflate(R.layout.card_perguntas, viewGroup, false);
    MyViewHolder mvh = new MyViewHolder(v);

    return mvh;
}

Depois de realizar esse carregamento é possível setar os valores em cada componente no método onBindViewHolder:

@Override
public void onBindViewHolder(MyViewHolder myViewHolder, int position) {
    myViewHolder.tvPergunta.setText(mList.get(position).getTextoPergunta());
}

Bem. Depois de toda esta explicação (espero que eu tenha conseguido fazer isso direito, porque sou péssimo nisso), resta finalizar dizendo que preciso apresentar uma lista de alternativas logo abaixo do texto em que eu exibo a pergunta. Essa lista não é fixa. Podem existir duas, três ou mais alternativas.

Fico por aqui, e já agradeço a todos que tiverem a paciência de ter tudo isso até o final =) o/

6
  • RecyclerView dentro de RecyclerView nunca vai ser uma alternativa. Sua lista de alternativas na verdade tem que ser views carregadas dinamicamente. Commented 27/11/2015 às 20:16
  • Irei tentar responder durante o fim de semana.
    – ramaral
    Commented 27/11/2015 às 21:24
  • Entendi, @Androiderson. Vou pensar em outras abordagens. Commented 28/11/2015 às 3:18
  • Obrigado pela disposição em me auxiliar, @ramaral. Sério mesmo =) Commented 28/11/2015 às 3:18
  • Já viu a minha resposta? Atende ao que pretende ou necessita de algo mais?
    – ramaral
    Commented 30/11/2015 às 15:13

3 Respostas 3

3

De facto usar uma scrollable view dentro de outra scrollable view trás problemas.
Talvez por isso o Android disponibiliza o componente ExpandableListView que mais não é que uma ListView cujos itens são listas.
Assim uma solução para o seu problema seria utilizar uma.

Defina duas classes, uma para representar a pergunta e outra para representar a resposta:

Question.java
Responsável por guardar o texto da pergunta, as respostas, a resposta correcta e a resposta seleccionada.

public class Question {

    private final String questionText;
    private ArrayList<Answer> answers;
    private int selectedAnswer = -1;
    private int correctAnswer = -1;

    public Question(String text) {
        this.questionText = text;
        answers = new ArrayList<>();
    }

    public boolean isCorrectlyAnswered(){
        return correctAnswer == getSelectedAnswer();
    }

    public int getSelectedAnswer() {
        return selectedAnswer;
    }

    public void setSelectedAnswer(int selectedAnswer) {
        this.selectedAnswer = selectedAnswer;
    }


    public void setCorrectAnswer(int correctAnswer) {
        if(answers.size() <= correctAnswer){
            throw new IllegalArgumentException();
        }
        this.correctAnswer = correctAnswer;
    }

    public void addAnswer(String text){
        answers.add(new Answer(text));
    }

    public String getText(){
        return questionText;
    }

    public ArrayList<Answer> getAnswers(){
        return answers;
    }
}

Answer.java
Responsável por guardar o texto da resposta.

public class Answer {

    private final String answerText;

    public Answer(String text){
        this.answerText = text;
    }

    public String getText() {
        return answerText;
    }

}  

O modo de lidar com uma ExpandableListView é semelhante ao de uma ListView. A diferença é que além de um Adpater e uma view para os itens(group) é necessário definir uma view para os sub-itens(children).

question_row.xml
View para as perguntas, representa cada um dos grupos da ExpandableListView. Contém o texto da pergunta e um sinal para indicar se a pergunta foi correctamente respondida.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/questionText"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="questionText"/>
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/correctMark"
            android:layout_gravity="right"
            android:clickable="false"
            android:focusable="false"
            android:checked="true"
            android:visibility="gone"/>
    </android.support.v7.widget.CardView>

</LinearLayout>

answer_row.xml
View para as respostas, representa cada um dos sub-itens dentro de cada grupo da ExpandableListView. Contém um RadioButton com o texto da resposta.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New RadioButton"
        android:id="@+id/answerText"
        android:clickable="false"
        android:focusable="false"/>
</LinearLayout>

ExpandListAdapter.java
Responsável por fazer a ponte entre os dados e a ExpandableListView

public class ExpandListAdapter extends BaseExpandableListAdapter {

    private final LayoutInflater inflater;;
    private ArrayList<Question> questions;

    public ExpandListAdapter(Context context, ArrayList<Question> questions){
        inflater = LayoutInflater.from(context);
        this.questions = questions;
    }

    @Override
    public int getGroupCount() {
        return questions.size();
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        ArrayList<Answer> answers = questions.get(groupPosition).getAnswers();
        if(answers == null){
            return 0;
        }
        return questions.get(groupPosition).getAnswers().size();
    }

    @Override
    public Object getGroup(int groupPosition) {
        return questions.get(groupPosition);
    }

    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return questions.get(groupPosition).getAnswers().get(childPosition);
    }

    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public boolean hasStableIds() {
        return false;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {

        View row = convertView;
        ViewHolder holder;

        if (row == null)
        {
            row = inflater.inflate(R.layout.question_row, parent, false);
            holder = new ViewHolder();
            holder.addView(row.findViewById(R.id.questionText))
                  .addView(row.findViewById(R.id.correctMark));
            row.setTag(holder);
        }else{
            holder = (ViewHolder) row.getTag();
        }

        TextView questionText = (TextView) holder.getView(R.id.questionText);
        CheckBox correctMark = (CheckBox) holder.getView(R.id.correctMark);
        Question question = questions.get(groupPosition);

        if(question.isCorrectlyAnswered()) {
            correctMark.setVisibility(View.VISIBLE);
        }else {
            correctMark.setVisibility(View.GONE);
        }

        questionText.setText(question.getText());
        return row;

    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {

        View row = convertView;
        ViewHolder holder;

        if (row == null)
        {
            row = inflater.inflate(R.layout.answer_row, parent, false);
            holder = new ViewHolder();
            holder.addView(row.findViewById(R.id.answerText));
            row.setTag(holder);
        }else{
            holder = (ViewHolder) row.getTag();
        }

        RadioButton answerText = (RadioButton) holder.getView(R.id.answerText);

        if(questions.get(groupPosition).getSelectedAnswer() == childPosition){
            answerText.setChecked(true);
        }else{
            answerText.setChecked(false);
        }
        answerText.setText(questions.get(groupPosition).getAnswers().get(childPosition).getText());

        return row;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }

    static class ViewHolder
    {
        private HashMap<Integer, View> storedViews = new HashMap<Integer, View>();

        public ViewHolder addView(View view)
        {
            int id = view.getId();
            storedViews.put(id, view);
            return this;
        }

        public View getView(int id)
        {
            return storedViews.get(id);
        }
    }
}

Só falta a Activity para apresentar a lista de perguntas e respostas.

activity_main-xml

<RelativeLayout
    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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin">

    <TextView
        android:id="@+id/textView"
        android:text="Questionário"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="32dp"/>

    <ExpandableListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/expandableListView"
        android:layout_below="@+id/textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />
</RelativeLayout>

MainActivity.java

Public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Obtém a referência da ExpandableListView
        ExpandableListView expListView = (ExpandableListView) findViewById(R.id.expandableListView);

        //Obtém a lista de perguntas a ser apresentada
        final ArrayList<Question> questions = getQuestions();

        //Cria uma instância do adapter e atribui-o à ExpandableListView
        expListView.setAdapter(new ExpandListAdapter(this, questions));

        //Define um listener para tratar a selecção das respostas
        expListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {

            @Override
            public boolean onChildClick(ExpandableListView parent, View v,
                                        int groupPosition, int childPosition, long id) {

                //Indica que esta resposta foi seleccionada
                questions.get(groupPosition).setSelectedAnswer(childPosition);

                //Obtém a referência do adapter
                ExpandListAdapter adapter = (ExpandListAdapter) parent.getExpandableListAdapter();

                //Notifica o adapter da selecção para que ela seja representada visualmente
                adapter.notifyDataSetChanged();
                return true;
            }
        });
    }

    //Preenche um ArrayList com 10 perguntas e respectivas respostas
    private ArrayList<Question> getQuestions() {
        ArrayList<Question> questions = new ArrayList<>();
        Question question;
        int totalAnswers;
        Random rnd = new Random();

        for (int i = 1; i <= 10; i++){
            question = new Question("Question - " + i);
            //As perguntas pares têm 3 respostas as impar 5
            if(i%2 == 0){
                totalAnswers = 3;
            }else{
                totalAnswers = 5;
            }
            for (int j = 1; j <= totalAnswers; j++){
                question.addAnswer("Answer - " + j + " to question - " + i);
            }
            //Atribui aleatóriamente a resposta correcta
            question.setCorrectAnswer(rnd.nextInt(totalAnswers));
            questions.add(question);
        }

        return questions;
    }
}

É só adaptar ao seu gosto.

GitHubGist

3
  • Tive que adaptar o meu código para conseguir implementar essa sugestão mas tudo funcionou corretamente. Tive algumas dúvidas no início, mas com a resposta ficou tão detalhada que bastou um pouco de atenção (e a colaboração de um amigo que tem me ajudado bastante) que tudo deu certo. MUITO obrigado!!! Eu já estava parado no mesmo lugar por causa dessa questão fazia semanas. Finalmente mais um passo adiante!!! Commented 30/11/2015 às 15:30
  • Ainda bem que pode ajudar. Esta resposta também foi útil para mim porque, como nunca tinha implementado uma ExpandableListView, foi uma forma de aprender a fazê-lo.
    – ramaral
    Commented 30/11/2015 às 15:38
  • Postei uma nova pergunta sobre a dificuldade que estou enfrentando para manipular o comportamento dos RadioButtons. Existe a possibilidade de você dar uma olhada e me auxiliar? O link é esse: pt.stackoverflow.com/questions/101676/… Abração!!! Commented 3/12/2015 às 4:47
1

Eu fiz algo semelhante por esses dias, espero que possa te ajudar. No meu problema eu adiciono dinamicamente uma quantidade de textView's, essa quantidade varia de acordo com um tamanho de um ArrayList. Você pode adaptar para o seu problema. Segue o código

        for (int i = 0; i < u.getLanguage().size(); i++) {
            language.addView(createTextView(addLanguage.getContext(), u.getLanguage().get(i), i,new LanguagesFragment()));
        }

método createTextView:

 private TextView createTextView(Context context, String text, int tag, final android.support.v4.app.Fragment f) {
    Bundle b = new Bundle();
    b.putInt("Position",tag);
    f.setArguments(b);
    TextView t = new TextView(context);
    t.setText(text);
    t.setTag(tag);
    t.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            getActivity().getSupportFragmentManager().beginTransaction().replace(R.id.carreira_detail_container,f).addToBackStack(null).commit();
        }
    });
    return t;
}

Explicando: A parte principal que servirá para você é referente ao context que estou chamando no método createTextView, esse context serve para referenciar onde o textView que estou criando será adicionado, no exemplo temos que ele será adicionado abaixo de addLanguage. Segue o xml:

 <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginLeft="30dp"
            android:id="@+id/containerEducation">
        <Button
            android:id="@+id/addEducation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:text="@string/addEducation"
            android:textAllCaps="false"
            /></LinearLayout>

Perceba que no linear layout eu setei a horientação como vertical desse modo somente um elemento aparecerá por linha no meu caso esse elemento é o textView. O resultado é a lista de idiomas que foram adicionadas abaixo do botão adicionar Idioma, segue imagem:

inserir a descrição da imagem aqui

1

Coloque um Linear Layout dentro do cardView ou algum Layout que seja adequado a sua necessidade. Não use um Recycler View dentro do CardView, pois os card_questoes estão dentro de um recycler view ja.

Tome cuidado para não colocar dois componentes que possuem Scroll um dentro do outro.

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 .