2015-11-25 90 views
0

我遇到了這個用戶界面,並試圖使用它。 enter image description here如何實現滾動視圖與視圖頂部對齊?

  1. 在圖片中,我想是,根佈局是一個滾動視圖。
  2. ScrollView裏面的頂視圖是相對佈局,下面是ListView,根據選擇的日期加載ListView。 (不確定)
  3. 當視圖向上滾動時,頂部視圖中的按鈕與父佈局的頂部對齊。
  4. 然後剩下的就像列表視圖一樣滾動。
  5. 當再次向下滾動時,頂視圖可見。

NB我試圖運用我的感覺就像已經使用了這樣的效果。但我無法將頂視圖的按鈕與父佈局對齊。如果需要,我可以發佈代碼。

請幫我找到這個效果背後的邏輯究竟是什麼。 謝謝。

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:orientation="vertical" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
android:paddingBottom="@dimen/activity_vertical_margin" 
tools:context="com.mypackage.Appointments_Main_ActivityFragment"> 
<RelativeLayout 

    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:orientation="vertical" 
     android:id="@+id/linear" 
     android:layout_height="wrap_content"> 
     <TextView 
      android:text="From Date" 
      android:id="@+id/frm" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textSize="14dip" 
      android:textStyle="bold" 
      android:layout_marginRight="5dip" /> 
     <TextView 
      android:text="To Date" 
      android:id="@+id/to" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:textSize="14dip" 
      android:textStyle="bold" 
      android:layout_marginRight="5dip" /> 
    </LinearLayout> 
    <Button 
     android:id="@+id/alertbtn" 
     android:layout_below="@id/linear" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:background="@color/DarkGray" 
     android:padding="16dp" 
     android:text="Alerts" 
     android:textColor="@color/accentforGray" /> 

    <ListView 
     android:layout_below="@id/alertbtn" 
     android:id="@+id/listView1" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="10dip" 
     android:background="#B29090" > 
    </ListView> 
</RelativeLayout> 

+0

張貼您的xml也 –

+0

[檢查](http://cyrilmottier.com/2014/05/20/custom-animations-with-fragments/) – Skynet

+0

@Skynet。是的,你分享的鏈接正是我正在尋找的。請給我一些代碼幫助,我可以使用它來實現這種效果 – SimplyProgrammer

回答

1

我自己解決了這個問題。

獲得與圖像中提到的相同的外觀和感覺。

我做了以下:

1)定義於ListView中使用3個佈局。

list_top_one - >對於具有從日期和到日期文字視圖

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:orientation="vertical" android:layout_width="match_parent" 
     android:layout_height="match_parent"> 
     <TextView 
      android:id="@+id/frmdate" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:padding="16dp" 
      android:text="from date"/> 
     <TextView 
      android:id="@+id/todate" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:padding="16dp" 
      android:text="to date"/> 

    </LinearLayout> 

b)中list_item_in_middle頂視圖 - >爲具有一樣的感覺

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     android:orientation="vertical" android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:padding="16dp" 
     android:id="@+id/llHeader"> 
    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@drawable/btn_background" 
     android:text="OK" 
     android:padding="16dp"/> 
    </LinearLayout> 

c按鈕)list_items - 用於保持>動態加載的值。

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

     <TextView 
      android:textColor="#000" 
      android:layout_margin="30dp" 
      android:id="@+id/button1" 
      android:layout_gravity="center" 
      android:text="OK" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" /> 

    </LinearLayout> 

2)主要活動佈局。

A)含有一個列表視圖

b)中,並且包括一個佈局將被示爲按鈕。

<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" 
     tools:context=".MainActivity"> 

     <ListView 
      android:id="@+id/listview" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

     </ListView> 

     <!-- This LinearLayout's visibility is toggled --> 
     <include layout="@layout/list_item_in_middle" /> 

    </RelativeLayout> 

參考: Making a middle element to get stuck in the header (ScrollView/ListView)

3)ListAdapter類

public class ListAdapter extends BaseAdapter { 
     public Context mContext; 
     TextView btCurrent; 
     ArrayList<Integer> newarrays = new ArrayList<>(); 

     ListAdapter(Context context,Integer[] arrval) { 
      mContext = context; 
      newarrays.addAll(Arrays.asList(arrval)); 
     } 

     public void InitializeValues(Integer[] arrval){ 
      newarrays.addAll(Arrays.asList(arrval)); 
     } 

     @Override 
     public int getCount() { 
      return newarrays.size(); 
     } 

     @Override 
     public Object getItem(int arg0) { 
      return newarrays.get(arg0); 
     } 

     @Override 
     public long getItemId(int position) { 
      return 0; 
     } 

     @Override 
     public View getView(int position, View convertView, ViewGroup parent) { 
      LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
      if(position == 0){ 
       convertView = inflater.inflate(R.layout.list_item_in_middle, null);//Adding btn layout 
      }else { 
       convertView = inflater.inflate(R.layout.list_items, null);// Adding other elements 
       btCurrent = (TextView) convertView.findViewById(R.id.button1); 

       if ((Integer) getItem(position) == 3) { 
        btCurrent.setText("Number " + getItem(position) + " is sticky"); 
       } else { 
        btCurrent.setText("" + getItem(position)); 
       } 
      } 
      return convertView; 
     } 
    } 

4)MainActivity

一個)OnScrollListener用於安裝BTN像在上面的列表項。

llHeader = (LinearLayout) findViewById(R.id.llHeader);//from the list_item_in_middle layout 
    listView.setOnScrollListener(new AbsListView.OnScrollListener() { 
     @Override 
     public void onScrollStateChanged(AbsListView view, int scrollState) { 

     } 

     @Override 
     public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { 
      if (firstVisibleItem > 0) {  // 1st row will stick 
       llHeader.setVisibility(View.VISIBLE); 
      } else { 
       llHeader.setVisibility(View.GONE); 
      } 
     } 
    }); 

B)的ListView

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { 
     @Override 
     public void onItemClick(AdapterView<?> parent, View view, int position, long id) { 
      int a = 0; 
      if(position == 0){//for clicking from date and to date. 
       TextView frm = (TextView) view.findViewById(R.id.frmdate); 
       frm.setOnClickListener(new View.OnClickListener() { 
        @Override 
        public void onClick(View v) { 
         Toast.makeText(MainActivity.this,"From date clicked",Toast.LENGTH_SHORT).show(); 
        } 
       }); 
       TextView to = (TextView) view.findViewById(R.id.todate); 
       to.setOnClickListener(new View.OnClickListener() { 
        @Override 
        public void onClick(View v) { 
         Toast.makeText(MainActivity.this,"to date clicked",Toast.LENGTH_SHORT).show(); 
        } 
       }); 
      }else { 
       if(position == 1) {//for clicking the btn like list element. 

        swap(); 
        Toast.makeText(MainActivity.this,"Header clicked",Toast.LENGTH_SHORT).show(); 
       }else { 
        Toast.makeText(MainActivity.this, parent.getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show(); 
       } 
      } 
     } 
    }); 

C)的OnItemClickListener LinearLayout中單擊函數,該函數被卡住,從LinearLayout中堪稱頂級

llHeader.setOnClickListener(new View.OnClickListener() { //for clicking the elements that gets stuck to the top 
     @Override 
     public void onClick(View v) { 
      swap(); 
      Toast.makeText(MainActivity.this,"Header clicked",Toast.LENGTH_SHORT).show(); 
     } 
    }); 

d)交換功能和列表元素元素在位置1

public void swap(){ 
     ltAdapter.notifyDataSetChanged(); 
     new1 = new Integer[]{20, 21, 22, 23, 24, 25, 26, 27, 28}; 
     ltAdapter.InitializeValues(new1); 
    } 

注:如果有任何可獲得焦點視圖將在列表視圖中,OnItemclickListener亙古不變的工作,在計算器閱讀本身

最後輸出:

第二元素之前點擊

點擊 後

滾動後

0

我認爲它發生在這樣:當你滾動頁面,線性佈局得到無形的成功,但是當你做滾動中游按鈕,焦點轉移到ListView和因此它是列表視圖滾動而不是整個頁面。

做一個快速滾動或滾動頁面,通過刷按鈕,而不是listview,並檢查botton是否看不見。

相關問題