Aligner des images et du texte avec GridView

Question

J'ai les éléments suivants design.

Comme vous pouvez le voir, le texte des jours de la semaine et les images du "titre de la colonne" ne sont pas alignés sur les éléments GridView.

Voici le fichier XML complet:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 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:orientation="vertical" 
android:weightSum="11" 
tools:context="com.test.me.fragments.patientResume"> 

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="0dp" 
    android:layout_weight="4" 
    android:background="@drawable/gradient"> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:id="@+id/aboveLights" 
     android:src="@mipmap/above_lights" 
     android:contentDescription="@string/above_lights" /> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:src="@mipmap/under_lights" 
     android:contentDescription="@string/under_lights" /> 


    <com.test.dashboard.view.CircleImageView 
     android:id="@+id/centerImg" 
     android:layout_width="104dp" 
     android:layout_height="104dp" 
     android:layout_centerInParent="true" 
     android:background="@mipmap/ic_default_avatar" /> 
    <com.test.dashboard.view.widget.RobotoLightTextView 
     android:id="@+id/PatientName" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignLeft="@id/aboveLights" 
     android:layout_alignTop="@id/aboveLights" 
     android:layout_alignRight="@id/aboveLights" 
     android:layout_alignBottom="@id/aboveLights" 
     android:layout_margin="1dp" 
     android:gravity = "center_horizontal" 
     android:textSize="20sp" 
     android:text="Mauricio Affonso" 
     android:textColor="@color/colorPrimaryDark" /> 
    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_centerVertical="true" 
     android:layout_marginLeft="25dp"> 

     <com.test.dashboard.view.widget.RobotoLightTextView 
      android:id="@+id/took_header" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/took" 
      android:textColor="@color/colorPrimaryDark" /> 

     <com.test.dashboard.view.widget.RobotoLightTextView 
      android:id="@+id/took_content" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/took_header" 
      android:gravity="center" 
      android:text="-" 
      android:textAlignment="center" 
      android:textColor="@color/colorPrimaryDark" 
      android:textSize="25sp" /> 
    </RelativeLayout> 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_centerVertical="true" 
     android:layout_marginRight="20dp"> 

     <com.test.dashboard.view.widget.RobotoLightTextView 
      android:id="@+id/missed_header" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/missed" 
      android:textColor="@color/colorPrimaryDark" /> 

     <com.test.dashboard.view.widget.RobotoLightTextView 
      android:id="@+id/missed_content" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignLeft="@+id/missed_header" 
      android:layout_alignRight="@+id/missed_header" 
      android:layout_below="@+id/missed_header" 
      android:gravity="center" 
      android:text="-" 
      android:textColor="@color/colorPrimaryDark" 
      android:textSize="25sp" /> 

    </RelativeLayout> 

    <com.test.me.wave.WavesView 
     android:id="@+id/waves_view" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" /> 
</RelativeLayout> 

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="25dp" 
    android:background="#ddf7ff"> 

    <com.test.dashboard.view.widget.RobotoLightTextView 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:id="@+id/countPatient" 
     android:textAlignment="center" 
     android:layout_centerVertical="true" 
     android:layout_centerHorizontal="true" 
     android:textColor="@color/colorPrimaryDark" 
     android:text="1 OF 1" 
     /> 

</RelativeLayout> 

    <RelativeLayout 
     android:id="@+id/titleImages" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/backgroundLight"> 

     <ImageView 
      android:id="@+id/morning" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:adjustViewBounds="true" 
      android:maxWidth="30dp" 
      android:maxHeight="30dp" 
      android:scaleType="fitCenter" 
      android:src="@mipmap/ic_morning" /> 

     <ImageView 
      android:id="@+id/noon" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:adjustViewBounds="true" 
      android:maxWidth="30dp" 
      android:maxHeight="30dp" 
      android:src="@mipmap/ic_noon" /> 

     <ImageView 
      android:id="@+id/evening" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:adjustViewBounds="true" 
      android:maxWidth="30dp" 
      android:maxHeight="30dp" 
      android:src="@mipmap/ic_evening" /> 

     <ImageView 
      android:id="@+id/bedtime" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:adjustViewBounds="true" 
      android:maxWidth="30dp" 
      android:maxHeight="30dp" 
      android:src="@mipmap/ic_bedtime" /> 
    </RelativeLayout> 

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="0dp" 
    android:layout_weight="7" 
    android:id="@+id/tableContainer" 
    android:background="@color/backgroundLight"> 

    <GridView 
     android:id="@+id/grid" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_above="@+id/date_layout" 
     android:layout_margin="@dimen/activity_horizontal_margin" 
     android:gravity="center" 
     android:horizontalSpacing="10dp" 
     android:numColumns="4" 
     android:paddingLeft="20dp" 
     android:paddingRight="20dp" 
     android:stretchMode="columnWidth" 
     android:verticalSpacing="5dp" /> 

    <com.test.me.grid.DateLayout 
     android:id="@+id/date_layout" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_centerHorizontal="true" 
     android:layout_marginBottom="5dp" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_alignTop="@+id/grid" 
     android:layout_marginTop="30dp" 
     android:id="@+id/Sun" 
     android:textColor="@color/colorPrimaryDark" 
     android:layout_marginLeft="7dp" 
     android:text="SUN" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_alignTop="@+id/grid" 
     android:layout_marginTop="75dp" 
     android:textColor="@color/colorPrimaryDark" 
     android:layout_marginLeft="7dp" 
     android:id="@+id/Mon" 
     android:text="MON" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_alignTop="@+id/grid" 
     android:layout_marginTop="120dp" 
     android:textColor="@color/colorPrimaryDark" 
     android:layout_marginLeft="7dp" 
     android:id="@+id/Tue" 
     android:text="TUE" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_alignTop="@+id/grid" 
     android:layout_marginTop="167dp" 
     android:textColor="@color/colorPrimaryDark" 
     android:layout_marginLeft="7dp" 
     android:id="@+id/Wed" 
     android:text="WED" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_alignTop="@+id/grid" 
     android:layout_marginTop="215dp" 
     android:textColor="@color/colorPrimaryDark" 
     android:layout_marginLeft="7dp" 
     android:id="@+id/Thu" 
     android:text="THU" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_alignTop="@+id/grid" 
     android:layout_marginTop="260dp" 
     android:textColor="@color/colorPrimaryDark" 
     android:layout_marginLeft="7dp" 
     android:id="@+id/Fri" 
     android:text="FRI" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_alignTop="@+id/grid" 
     android:layout_marginTop="310dp" 
     android:textColor="@color/colorPrimaryDark" 
     android:layout_marginLeft="7dp" 
     android:id="@+id/Sat" 
     android:text="SAT" /> 


</RelativeLayout> 

</LinearLayout> 

Comme vous pouvez le voir le contenu de RelativeLayout titleImages et la semaine du texte jours devraient être alignés sur les articles GridView mais je vais avoir des résultats différents sur différentes résolutions de téléphone . J'ai même essayé de changer dynamiquement les positions:

int test[] = new int[2]; 
int space = grid.getHorizontalSpacing(); 
int height = grid.getMeasuredHeight()/7; 
int Width = grid.getColumnWidth()/2; 
int paddingTop = grid.getPaddingTop(); 
int paddingLeft = grid.getPaddingLeft(); 

Resources r = getResources(); 
float spacePx = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, space + 10, r.getDisplayMetrics()) ; 
float paddingTopPx = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, paddingTop - 7, r.getDisplayMetrics()); 
float paddingLeftPx = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, paddingLeft - 12, r.getDisplayMetrics()); 
grid.getLocationInWindow(test); 

for(int i = 0; i < 7; i++){ 
    Days[i].setY(paddingTopPx + (test[1] - grid.getMeasuredHeight()) + ((i +1)* (height))); 
} 

for(int i = 0; i < 4; i++){ 
    icons[i].setX((paddingLeftPx + test[0]) + (i) * (spacePx + Width)); 
} 

Answer 1

J'ai vérifié avec une présentation différente, mais tout semble pas parfait, donc la meilleure façon de faire votre point de vue est simple utilisation gridview .Almost succeded mais vous devez travailler sur ce plus logique pour obtenir exactement ce dont vous avez besoin

<GridView 
    android:id="@+id/grid_calender" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingLeft="30dp" 
    android:paddingRight="30dp" 
    android:numColumns="5" 
    android:verticalSpacing="0dp" /> 

day_view

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/rl" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:padding="5dp"> 

     <TextView 
      android:id="@+id/tv_new" 
      android:layout_width="@dimen/text_height_width" 
      android:layout_height="@dimen/text_height_width" 
      android:layout_centerInParent="true" 
      android:gravity="center" 
      android:text="" 
      android:textAppearance="?android:attr/textAppearanceSmall" 
      android:textColor="@android:color/darker_gray" /> 


</RelativeLayout> 

Créer adaptateur avec une meilleure logique au besoin son code édité, S'il vous plaît ignorer les codes commenté Merci

public class CustomCalendarAdapter extends BaseAdapter { 
    static final int FIRST_DAY_OF_WEEK = 0; 
    public ArrayList<Day> dayList = new ArrayList<>(); 
    String[] days; 
    Context context; 
    List<Boolean> event_status; 
    // Calendar local_cal_30 = Calendar.getInstance(TimeZone.getDefault(), Locale.getDefault()); 
    Calendar cal; 

    public CustomCalendarAdapter(Context context, ArrayList<Day> dayList, List<Boolean> _event_status, Calendar cal) { 
     this.context = context; 
     this.dayList = dayList; 
     this.event_status = _event_status; 
     this.cal = cal; 
     cal.set(Calendar.DAY_OF_MONTH, 1); 
     refreshDays(); 
    } 

    @Override 
    public int getCount() { 
     return days.length; 
    } 

    @Override 
    public Object getItem(int position) { 
     return dayList.get(position); 
    } 

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

// public int getPrevMonth(){ 
//  if(cal.get(Calendar.MONTH) == cal.getActualMinimum(Calendar.MONTH)){ 
//   cal.set(Calendar.YEAR, cal.get(Calendar.YEAR-1)); 
//  }else{ 
// 
//  } 
//  int month = cal.get(Calendar.MONTH); 
//  if(month == 0){ 
//   return month = 11; 
//  } 
// 
//  return month-1; 
// } 

    public int getMonth() { 
     return cal.get(Calendar.MONTH); 
    } 

    @Override 
    public View getView(final int position, View convertView, ViewGroup parent) { 
     View v = convertView; 
     LayoutInflater vi = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
     if (position % 5 == 0) { 
      v = vi.inflate(R.layout.day_view, null); 
      TextView day = (TextView) v.findViewById(R.id.tv_new); 
      if (position/5 == 0) { 
       day.setText(R.string.sunday); 
      } else if (position/5 == 1) { 
       day.setText(R.string.monday); 
      } else if (position/5 == 2) { 
       day.setText(R.string.tuesday); 
      } else if (position/5 == 3) { 
       day.setText(R.string.wednesday); 
      } else if (position/5 == 4) { 
       day.setText(R.string.thursday); 
      } else if (position/5 == 5) { 
       day.setText(R.string.friday); 
      } else if (position/5 == 6) { 
       day.setText(R.string.saturday); 
      } 
     } else { 


      Calendar cal = Calendar.getInstance(TimeZone.getDefault(), Locale.getDefault()); 
      Day dayObject = dayList.get(position); 
      v = vi.inflate(R.layout.day_view, null); 
//   RelativeLayout rl_outerView = (RelativeLayout) v.findViewById(R.id.rl); 

//   FrameLayout today = (FrameLayout) v.findViewById(R.id.today_frame); 
//   FrameLayout event = (FrameLayout) v.findViewById(R.id.event_frame); 
//   FrameLayout disable_frame = (FrameLayout) v.findViewById(R.id.disable_frame); 
//   FrameLayout selected_frame = (FrameLayout) v.findViewById(R.id.selected_frame); 
      TextView tv_date = (TextView) v.findViewById(R.id.tv_new); 
      Calendar local_cal = Calendar.getInstance(TimeZone.getDefault(), Locale.getDefault()); 
      tv_date.setVisibility(View.VISIBLE); 
//   rl_outerView.setVisibility(View.VISIBLE); 
//   selected_frame.setVisibility(View.GONE); 
      if (dayObject.getDay() == 0) { 
//    rl_outerView.setVisibility(View.GONE); 
      } else { 
       tv_date.setVisibility(View.VISIBLE); 
       tv_date.setText(String.valueOf(dayObject.getDay()));//sets the date 
      } 


      //Only show 30 days from current date 
//   if ((dayObject.getDay()<local_cal.get(Calendar.DAY_OF_MONTH) && 
//    dayObject.getMonth() == local_cal.get(Calendar.MONTH)) || ((dayObject.getMonth() == local_cal_30.get(Calendar.MONTH))&& 
//    dayObject.getDay()>local_cal_30.get(Calendar.DAY_OF_MONTH))) { 

      //Only show upcoming dates from current date 
      if ((dayObject.getDay() < local_cal.get(Calendar.DAY_OF_MONTH) && 
        dayObject.getMonth() == local_cal.get(Calendar.MONTH))) { 
       //These dates come out of 30 days(Based on current date) 
//    disable_frame.setVisibility(View.VISIBLE); 
      } else { 
       //Rest days come here 
//    disable_frame.setVisibility(View.GONE); 
       dayObject.setDisable_date(true); 
//    event.setVisibility(View.GONE); 
       tv_date.setTextColor(Color.WHITE); 


       //Now compare the schedule date list with each date for matches 
       for (int i = 0; i < CustomGridCalendarView.schedule_list.size(); i++) { 
        try { 
         SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd"); 
         Date scheduleDate = format.parse(CustomGridCalendarView.schedule_list.get(i).getScheduleDate()); 
         cal = Calendar.getInstance(); 
         cal.setTime(scheduleDate); 
         if (dayObject.getDay() == cal.get(Calendar.DAY_OF_MONTH) && 
           dayObject.getMonth() == cal.get(Calendar.MONTH) && 
           dayObject.getYear() == cal.get(Calendar.YEAR) 
           ) { 
          //Show the event frame, here we got a match date 
//       event.setVisibility(View.VISIBLE); 
//       today.setVisibility(View.GONE); 
          tv_date.setTextColor(context.getResources().getColor(R.color.colorPrimary)); 
         } 
        } catch (ParseException e) { 
         e.printStackTrace(); 
        } 
       } 
       if (dayObject.isEvent_status()) { 
//     event.setVisibility(View.GONE); 
//     selected_frame.setVisibility(View.VISIBLE); 
//     today.setVisibility(View.GONE); 
        tv_date.setTextColor(Color.WHITE); 
       } else { 
//     selected_frame.setVisibility(View.GONE); 
        tv_date.setTextColor(Color.WHITE); 
       } 

       //Check for current date 
       if (dayObject.getYear() == local_cal.get(Calendar.YEAR) && dayObject.getMonth() == local_cal.get(Calendar.MONTH) 
         && dayObject.getDay() == local_cal.get(Calendar.DAY_OF_MONTH)) { 
//     today.setVisibility(View.VISIBLE); 
//     tv_date.setTextColor(Color.WHITE); 
//     event.setVisibility(View.GONE); 
//     tv_date.setTypeface(Typeface.DEFAULT_BOLD); 
       } else { 
//     today.setVisibility(View.GONE); 

       } 
      } 
     } 
     return v; 
    } 

    public void refreshDays() { 
     boolean before_current_date = true; 
     // clear items 
     dayList.clear(); 

     int lastDay = cal.getActualMaximum(Calendar.DAY_OF_MONTH) + 7; 
     int firstDay = (int) cal.get(Calendar.DAY_OF_WEEK); 
     int year = cal.get(Calendar.YEAR); 
     int month = cal.get(Calendar.MONTH); 
     //TimeZone tz = TimeZone.getDefault(); 

     // figure size of the array 
     if (firstDay == 0) { 
      days = new String[lastDay + (FIRST_DAY_OF_WEEK * 6)]; 
     } else { 
      days = new String[lastDay + firstDay - (FIRST_DAY_OF_WEEK + 1)]; 
     } 

     int j = FIRST_DAY_OF_WEEK; 

     // populate empty days before first real day 
     if (firstDay > 0) { 
      for (j = 0; j < (firstDay - FIRST_DAY_OF_WEEK) + 7; j++) { 
       days[j] = ""; 
       Day d = new Day(0, 0, 0, false); 
       dayList.add(d); 
      } 
     } else { 
      for (j = 0; j < (FIRST_DAY_OF_WEEK * 6) + 7; j++) { 
       days[j] = ""; 
       Day d = new Day(0, 0, 0, false); 
       dayList.add(d); 
      } 
      j = FIRST_DAY_OF_WEEK * 6 + 1; // sunday => 1, monday => 7 
     } 

     // populate days 
     int dayNumber = 1; 

     if (j > 0 && dayList.size() > 0 && j != 1) { 
      dayList.remove(j - 1); 
     } 

     for (int x = 0, i = j - 1; i < days.length; i++) { 
      Day day; 
      if (event_status.size() > x) { 
       day = new Day(dayNumber, year, month, event_status.get(x)); 
      } else { 
       day = new Day(dayNumber, year, month, false); 
      } 


      x++; 
      Calendar cTemp = Calendar.getInstance(); 
      cTemp.set(year, month, dayNumber); 
      //int startDay = Time.getJulianDay(cTemp.getTimeInMillis(), TimeUnit.MILLISECONDS.toSeconds(tz.getOffset(cTemp.getTimeInMillis()))); 
      days[i] = "" + dayNumber; 
      dayNumber++; 
      dayList.add(day); 
     } 
    } 
}