Android List Fragment with fixed Header

问题:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="100dip"
    android:padding="6dip" >

    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="6dip"
        android:contentDescription="Image" />

    <TextView
        android:id="@+id/txtNome"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/img_icon"
        android:textSize="12sp"
        android:gravity="top"
        android:text="Nome" />

    <TextView
        android:id="@+id/txtPreco"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:layout_toRightOf="@+id/img_icon"
        android:layout_below="@+id/txtNome"
        android:textSize="12sp"
        android:text="Preço" />

    <TextView
        android:id="@+id/txtQtde"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:text="Qtde"
        android:layout_below="@+id/txtPreco"
        android:layout_toRightOf="@+id/img_icon" />

    <TextView
        android:id="@+id/txtTotal"
        android:layout_width="fill_parent"
        android:layout_height="26dip"
        android:textSize="12sp"
        android:text="Total"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/img_icon"
        android:layout_below="@+id/txtQtde" />

</RelativeLayout>

Hey guys!

I have a FragmentList with a custom Adapter, this adapter has some TextViews and Imageviews... Everything works well but, i'm trying to add a Header (A layout with a button) and a Footer (A layout with some Textviews and an ImageView). I'd like the Header and Footer not to scroll down with the list, but they do... Can someone please helpe me? Below is A print and the code...

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    mAdapter = new PedidoAdapter(getContext(), (Pedido)((MainActivity) getActivity()).pedido);

    setListAdapter(mAdapter);

    // Inflate the layout for this fragment
    return super.onCreateView(inflater, container, savedInstanceState);
}

@Override
public void onViewCreated(View view, Bundle savedInstance){
    super.onViewCreated(view, savedInstance);

    StyleSpan bssLabel = new StyleSpan(Typeface.BOLD);
    StyleSpan bssText = new StyleSpan(Typeface.NORMAL);

    SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy HH:mm:ss");
    String Data = String.valueOf(sdf.format(((MainActivity) getActivity()).pedido.getDataPedido()));

    String _dataPedido = "Data Pedido.: " + Data;
    SpannableStringBuilder sbDataPedido = new SpannableStringBuilder(_dataPedido);
    sbDataPedido.setSpan(bssLabel, 0, 14, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
    sbDataPedido.setSpan(bssText, 14, _dataPedido.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);

    String _status = "Status.: " + String.valueOf(((MainActivity) getActivity()).pedido.getStatusPedido());
    SpannableStringBuilder sbStatus = new SpannableStringBuilder(_status);
    sbStatus.setSpan(bssLabel, 0, 9, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
    sbStatus.setSpan(bssText, 8, _status.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);

    float total = 0;

    for(int i = 0; i < ((MainActivity) getActivity()).pedido.getItens().size(); i++){
        total += ((MainActivity) getActivity()).pedido.getItens().get(i).getQtde() * ((MainActivity) getActivity()).pedido.getItens().get(i).getProduto().getValor();
    }

    for(int i = 0; i < ((MainActivity) getActivity()).pedido.getPizzas().size(); i++){
        total += ((MainActivity) getActivity()).pedido.getPizzas().get(i).getQtde() * ((MainActivity) getActivity()).pedido.getPizzas().get(i).getPizza().getValor();
    }

    String _total = "Total.: R$ " + String.valueOf(total);
    SpannableStringBuilder sbTotal = new SpannableStringBuilder(_total);
    sbTotal.setSpan(bssLabel, 0, 7, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
    sbTotal.setSpan(bssText, 8, _total.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);

    View footer = LayoutInflater.from(getContext()).inflate(R.layout.listview_pedido_footer_layout, null, false);

    ((TextView) footer.findViewById(R.id.txtDataPedido)).setText(sbDataPedido);
    ((TextView)footer.findViewById(R.id.txtStatusPedido)).setText(sbStatus);
    ((TextView)footer.findViewById(R.id.txtTotalPedido)).setText(sbTotal);

    View header = LayoutInflater.from(getContext()).inflate(R.layout.listview_pedido_header_layout, null, false);

    getListView().addHeaderView(header);
    getListView().addFooterView(footer);
}

回答1:

Silva try this layout please:

<?xml version="1.0" encoding="utf-8"?>
<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" >

    <!-- Header aligned to the top -->
    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="#FC9"
        android:gravity="center" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="Fixed Header"
            android:textColor="#000"
            android:textSize="20sp" />
    </RelativeLayout>

    <!-- Footer aligned to the bottom -->
    <RelativeLayout
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#FC0"
        android:gravity="center" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="Fixed Footer"
            android:textColor="#000"
            android:textSize="20sp" />
    </RelativeLayout>

    <!-- Scrollable Item below header and above footer -->
    <ScrollView
        android:id="@+id/scrollableContents"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@id/footer"
        android:background="#005"
        android:layout_below="@id/header" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="22dp"
                android:layout_marginTop="22dp"
                android:text="Item 1"
                android:textColor="#CCCCCC"
                android:textSize="19sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="22dp"
                android:layout_marginTop="22dp"
                android:text="Item 2"
                android:textColor="#CCCCCC"
                android:textSize="19sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="22dp"
                android:layout_marginTop="22dp"
                android:text="Item 3"
                android:textColor="#CCCCCC"
                android:textSize="19sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="22dp"
                android:layout_marginTop="22dp"
                android:text="Item 4"
                android:textColor="#CCCCCC"
                android:textSize="19sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="22dp"
                android:layout_marginTop="22dp"
                android:text="Item 5"
                android:textColor="#CCCCCC"
                android:textSize="19sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="22dp"
                android:layout_marginTop="22dp"
                android:text="Item 6"
                android:textColor="#CCCCCC"
                android:textSize="19sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="22dp"
                android:layout_marginTop="22dp"
                android:text="Item 7"
                android:textColor="#CCCCCC"
                android:textSize="19sp" />

        </LinearLayout>

    </ScrollView>

</RelativeLayout>

This Android studio project is available here https://github.com/m-vahidalizadeh/fixed-header-footer.git, you can clone it to see the result.

---

If you want to do it dynamically, you should use custom array adapter (http://developer.android.com/reference/android/widget/ArrayAdapter.html). Then, follow this:

<?xml version="1.0" encoding="utf-8"?>
<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" >

  <!-- Header aligned to top -->
  <RelativeLayout
    android:id="@+id/header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="#FC9"
    android:gravity="center" >

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:text="Fixed Header"
      android:textColor="#000"
      android:textSize="20sp" />
  </RelativeLayout>

  <!-- Footer aligned to bottom -->
  <RelativeLayout
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="#FC0"
    android:gravity="center" >

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_margin="5dp"
      android:text="Fixed Footer"
      android:textColor="#000"
      android:textSize="20sp" />
  </RelativeLayout>

  <!-- Scrollable Item below header and above footer -->
  <ScrollView
    android:id="@+id/scrollableContents"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@id/footer"
    android:background="#005"
    android:layout_below="@id/header" >

     <!-- Inflate the contents of the ScrollView dynamicaly -->

  </ScrollView>

</RelativeLayout>

you can add your items like this:

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 1"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 2"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 3"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 4"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 5"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 6"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="22dp"
        android:layout_marginTop="22dp"
        android:text="Item 7"
        android:textColor="#CCCCCC"
        android:textSize="19sp" />

</LinearLayout>

Then, you should populate your content into your middle ScrollView like this:

import android.app.Activity;
import android.os.Bundle;
import android.widget.ScrollView;

public class MainActivity extends Activity {

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

        ScrollView scrollable_contents = (ScrollView) findViewById(R.id.scrollableContents);
        getLayoutInflater().inflate(R.layout.contents, scrollable_contents);

    }

}

I hope it helps :)