web-gelistirme-sc.com

Genişletilebilir masa

enter image description here

Bu tür genişletilebilir/daraltılabilir masa görünümü yapmak istiyorum. Resimdeki kategoriler ve alt kategoriler var. Örneğin "sağlık ve güzellik" bir kategori ve tıklattığımda Bu hücrede, aşağıdaki resimde gösterildiği gibi açık alt kategorilerinden daha fazlası var. Peki, bu tür tablo görünümünü nasıl yapabilirim? lütfen bana öner.

20
Rahul Patel

Sonunda aşağıda gereksinimin ne olduğunu tam olarak anlatan iki çok yararlı yardım bağlantısı alıyorum Genişletme/Daraltma Tablo Görünümü Bölümleri
iOS için Daraltılabilir Tablo Görünümü

Gerçekten, bu tür genişletme/daraltma tableview bölümleri için iyi makaleler

17
Rahul Patel

UITableView içine genişletilebilir Hücre için Aşağıdaki kodu kullanın

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";   
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }
    cell.textLabel.text=[[self.arForTable objectAtIndex:indexPath.row] valueForKey:@"name"];
    [cell setIndentationLevel:[[[self.arForTable objectAtIndex:indexPath.row] valueForKey:@"level"] intValue]];    
    return cell;
}

genişletmek ve daraltmak için kullanılan kod - TableView DidSelectRow Method

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
    NSDictionary *d=[self.arForTable objectAtIndex:indexPath.row];
    if([d valueForKey:@"Objects"]) {
        NSArray *ar=[d valueForKey:@"Objects"];
        BOOL isAlreadyInserted=NO;
        for(NSDictionary *dInner in ar ){
            NSInteger index=[self.arForTable indexOfObjectIdenticalTo:dInner];
            isAlreadyInserted=(index>0 && index!=NSIntegerMax);
            if(isAlreadyInserted) break; 
        }
        if(isAlreadyInserted) {
            [self miniMizeThisRows:ar];
        } else {        
            NSUInteger count=indexPath.row+1;
            NSMutableArray *arCells=[NSMutableArray array];
            for(NSDictionary *dInner in ar ) {
                [arCells addObject:[NSIndexPath indexPathForRow:count inSection:0]];
                [self.arForTable insertObject:dInner atIndex:count++];
            }
            [tableView insertRowsAtIndexPaths:arCells withRowAnimation:UITableViewRowAnimationLeft];
        }
    }
}

Satırları simge durumuna küçültmek ve büyütmek/büyütmek için daraltmak için yardımcı olacak bir yöntem.

-(void)miniMizeThisRows:(NSArray*)ar{
    for(NSDictionary *dInner in ar ) {
        NSUInteger indexToRemove=[self.arForTable indexOfObjectIdenticalTo:dInner];        
        NSArray *arInner=[dInner valueForKey:@"Objects"];
        if(arInner && [arInner count]>0){
            [self miniMizeThisRows:arInner];
        }
        if([self.arForTable indexOfObjectIdenticalTo:dInner]!=NSNotFound) {
            [self.arForTable removeObjectIdenticalTo:dInner];
            [self.tableView deleteRowsAtIndexPaths:
              [NSArray arrayWithObject:[NSIndexPath indexPathForRow:indexToRemove inSection:0]]
                      withRowAnimation:UITableViewRowAnimationRight];
        }
    }
}

Kaynak kodunu buradan indirebilirsiniz.

10
Nimit Parekh

Bu yardımcı olursa: [Erişim uitableview'ın genişletilebilir ve daraltılabilir bölümlerine] https://github.com/OliverLetterer/UIExpandableTableView

8
Maadiah

Genişletilebilir masa görünümleri için bu tür masa görünümlerinin genellikle nasıl oluşturulduğuyla aynı hizada olan biraz farklı bir yaklaşımım var.

başlıkları var ve hücreleri var . Üstbilgiler , görünür olmalıdır ve ardından hücreler başlıkların altındaki göster veya gizle olur. Bu, başlığa bir hareket tanıyıcı ekleyerek elde edilebilir ve dokunulduğunda, sadece başlığın altındaki tüm hücreleri (bölüm) ve viceversa'yı (hücre ekle) kaldırırsınız. Elbette, hangi başlıkların "açık" ve hangi başlıkların "kapalı" olduğunu belirtmeniz gerekir.

Bu birkaç nedenden dolayı Nice:

  1. Başlıkları ve hücrelerin işi, kodu daha temiz hale getiren ayrılmıştır.
  2. Bu yöntem, tablo görünümlerinin nasıl oluşturulduğuyla (başlıklar ve hücreler) ve bu nedenle çok fazla sihir içermeyen bir şekilde akar - kod basitçe hücreleri kaldırır veya ekler ve iOS'un sonraki sürümleriyle uyumlu olmalıdır.

Bunu başarmak için çok basit bir kütüphane yaptım. Tablo görünümünüz UITableView bölüm başlıkları ve hücreleri ile ayarlandığı sürece, tek yapmanız gereken tableview ve başlığın alt sınıfıdır. Dene :)

Bağlantı: https://github.com/fuzz-productions/FZAccordionTableView

 enter image description here

6
kgaidis

Bu kodu kullanmayı deneyin ... Bu yardımcı olabilir .. Ve Kodu ihtiyaçlarınıza göre düzenlemek için çekinmeyin ...

#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
@interface ViewController ()

@end

@implementation ViewController
@synthesize myTable;
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    //myTable.backgroundColor=[UIColor clearColor];
   // self.view.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"wood.png"]];
    muArr= [[NSMutableArray alloc]initWithObjects:@"Vinay",@"Anmol",@"Jagriti", nil];
    ExpArr=[[NSMutableArray alloc]initWithObjects:@"Useeee",@"Thissss",@"Codeee", nil];
    otherExpand=100;
    checker=100;

}

-(NSInteger) numberOfSectionsInTableView:(UITableView *)tableView
{
    return muArr.count;
}

-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if(otherExpand==section)
    return ExpArr.count;

    return  0;

}

-(BOOL)tableView:(UITableView *)table canCollapse:(NSIndexPath *)indexPath
{

    return NO;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *[email protected]"Cell";
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:Identifier];
    if (cell==nil)
    {
        cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:Identifier];

    }
    cell.textLabel.text=[ExpArr objectAtIndex:indexPath.row];
    cell.textLabel.backgroundColor=[UIColor clearColor];
    UIView *viewww=[[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
    viewww.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"wood.png"]];
    cell.backgroundView=viewww;

   // cell.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"wood.png"]];
    [tableView setSeparatorStyle:UITableViewCellSeparatorStyleSingleLineEtched];
    [tableView setSeparatorColor:[UIColor purpleColor]];

    return cell;

}

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{

    UIView *view1=[[UIView alloc]initWithFrame:CGRectMake(0, 0, 320, 44)];
    [view1.layer setCornerRadius:20];
    view1.layer.borderWidth=2;
    view1.layer.borderColor=[UIColor brownColor].CGColor;
    UILabel *label=[[UILabel alloc]initWithFrame:CGRectMake(10, 0, 295, 44)];
    label.backgroundColor=[UIColor clearColor];

    label.text=[muArr objectAtIndex:section];
    UIButton *btn=[UIButton buttonWithType:UIButtonTypeDetailDisclosure];
    btn.frame=CGRectMake(280, -5, 50, 50);
    btn.backgroundColor=[UIColor clearColor];
    btn.tag=section;

    view1.backgroundColor=[UIColor colorWithPatternImage:[UIImage imageNamed:@"wood.png"]];
    label.textColor=[UIColor blackColor];
    label.font=[UIFont fontWithName:@"American TypeWriter" size:18];
    //btn.backgroundColor=[UIColor blackColor];
    [view1 addSubview:btn];
    [view1 addSubview:label];

    [btn addTarget:self action:@selector(Btntap:) forControlEvents:UIControlEventTouchUpInside];

    return view1;
}


-(void)Btntap : (UIButton *)btn
{
    if(otherExpand!=100)
    {
        if (otherExpand==btn.tag)
        {
            NSMutableArray *tempArr2=[[NSMutableArray alloc]init];
            for(int j=0;j<ExpArr.count;j++)
            {
                NSIndexPath *indexx1=[NSIndexPath indexPathForRow:j inSection:otherExpand];
                [tempArr2 addObject:indexx1];
            }
            checker=0;
            otherExpand=100;
            [myTable deleteRowsAtIndexPaths:tempArr2 withRowAnimation:UITableViewRowAnimationAutomatic];
        }

        else
        {
            NSMutableArray *tempArr2=[[NSMutableArray alloc]init];
            for(int j=0;j<ExpArr.count;j++)
            {
                NSIndexPath *indexx1=[NSIndexPath indexPathForRow:j inSection:otherExpand];
                [tempArr2 addObject:indexx1];
            }
            checker=1;
            otherExpand=100;
            [myTable deleteRowsAtIndexPaths:tempArr2 withRowAnimation:UITableViewRowAnimationAutomatic];
        }
    }

    if(checker!=0)
    {
        otherExpand=btn.tag;
        //checker=
        NSMutableArray *tempArr=[[NSMutableArray alloc]init];
        for(int i=0;i<ExpArr.count;i++)
        {
            NSIndexPath *indexx=[NSIndexPath indexPathForRow:i inSection:btn.tag];
            [tempArr addObject:indexx];
        }
        [myTable insertRowsAtIndexPaths:tempArr withRowAnimation:UITableViewRowAnimationAutomatic];

        checker=1;
    }
    checker=100;
}



-(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return 44;
}

@end
5
Vinay Kumar

WWDC 2011'de UITableView Değişiklikleri, İpuçları ve Püf Noktaları - oturum 125 adında harika bir video var.
Ayrıca örnek kodunu da kontrol edin - TVAnimationsGestures

4
Eyal

Swift'deki bu akordeon örneğine bakabilirsiniz: https://github.com/tadija/AEAccordion

enter image description here

Akordeon efekti oluşturmak için çok az kod var (bölümleri değil hücreleri kullanarak) ve bonus olarak, diğer XIB dosyalarının içinde (özel görünümleri kullanan özel hücreler için yararlıdır) XIB dosyalarını kullanmak için de bir çözüm vardır.

3
tadija

Lütfen bu örneği deneyin:

genişletilebilir TableView için en iyi örnek

https://github.com/OliverLetterer/UIExpandableTableView

2
Varun

TLIndexPathTools bu tür şeyleri doğal olarak yapabilir. Aslında, hem genişletilebilir bölümler hem de genişletilebilir ağaç yapıları için uzantılar vardır. Genişletilebilir bölümler için Daralt örnek projesini ve genişletilebilir ağaçlar için/- Anahat örnek projesini çalıştırmayı deneyin.

TLIndexPathTools kullanmanın bir avantajı, basit, düşük seviyeli bir API olarak, her tür dinamik tablo görünümünü ve koleksiyon görünümü sorunlarını ortak bir yaklaşım kullanarak çözebilmesidir. Ve Core Data ve sade diziler ile birbiriyle değişmeden çalışır.

1
Timothy Moose

ExpyTableView uygulamasını kullanabilirsiniz. 

Bu sizin verilen hücreden genişletilebilir bir bölüm yapar. İOS 8.0 ile uyumludur. Çoklu masa görünümü hücreli genişletilebilir masa görünümü oluşturarak esnekliğe sahip olacaksınız. Sadece ayırıcıları durumlar için değiştirin ve ardından kimse genişletmek için birden fazla hücre kullandığınızı bilmeyecektir.

  • Diğer çözümler: Bir hücrenin genişletilmesi için yüksekliği değiştiriyorsunuz, hücrenin tasarımında bir güncelleme gerektiğinde, koddaki tüm otomatik yerleşim kısıtlamalarını veya mantığı yeniden yapılandırmanız gerekiyor. 

  • ExpyTableView: Birden çok hücre kullanarak ve bunları ekleyip silerek (genişletme ve çökme anlamına gelebilir) genişletilebilir bir tablo görünümü oluşturursanız, gelecekteki tasarım taleplerinde büyük bir şansınız olur. Tek yapmanız gereken yeni bir UITableViewCell eklemek ve kodunu yazmak. Yeni tasarıma kolayca sahip olacaksınız.

Tek yapmanız gereken import ExpyTableView ve sonra:

class ViewController: ExpyTableViewDataSource, ExpyTableViewDelegate {

  @IBOutlet weak var expandableTableView: ExpyTableView!

  // First, set data source and delegate for your table view.
  override func viewDidLoad() {
    super.viewDidLoad() 
    expandableTableView.dataSource = self
    expandableTableView.delegate = self
  }

  // Then return your expandable cell instance from expandingCell data source method.
  func expandableCell(forSection section: Int, inTableView tableView: ExpyTableView) -> UITableViewCell {
    // this cell will be displayed at IndexPath with section: section and row 0
  }
} 

Eski tablo görünümü bölümünüzü şimdi genişletilebilir bir tablo görünümü bölümünden görebilirsiniz. Ayrıca example project uygulamasını indirebilir ve daha ayrıntılı örnekler görebilirsiniz.

0

.H dosyanızda 

LoadCustomCell *cell1;
NSMutableArray  *arrayForBool;
NSMutableArray  *questionArray;
NSMutableArray  *answerArray;

.M dosyanızda

 viewDidLoadMethod {
 _faqTblView.estimatedRowHeight = 30;
 _faqTblView.rowHeight = UITableViewAutomaticDimension;
 arrayForBool = [[NSMutableArray alloc]init];

 _questionArray = [[NSMutableArray alloc]init];
 _answerArray = [[NSMutableArray alloc]init];
 for (int i = 0; i < _questionArray.count; i++) {
        [arrayForBool addObject:@"0"];
    }
    self.faqTblView.dataSource = self;
    self.faqTblView .delegate = self;
    [self.faqTblView reloadData];
 }

daha sonra 

 #pragma mark - TableView Datasource & Delegate Method.
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
  return [_questionArray count];
 }
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {

    UILabel *lblText = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 260, 100)];
    lblText.text = [_questionArray objectAtIndex:section];
    return [lblText getLabelHeight] + 20;(created custom class)
 }
-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {

UITapGestureRecognizer  *headerTapped   = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(sectionHeaderTapped:)];
cell1 = [[[NSBundle mainBundle] loadNibNamed:@"LoadCustomCell" owner:self options:nil] objectAtIndex:0];
[cell1 setFrame:CGRectMake(0, 0, cell1.frame.size.width, cell1.frame.size.height)];
NSString *numStr = [NSString stringWithFormat:@"%ld. ",section + 1];
[cell1.sideMenuUserNameLabel setText:[numStr stringByAppendingString:[_questionArray objectAtIndex:section]]];
[cell1 setBackgroundColor:[UIColor lightGrayColor]];
cell1.tag = section;
[cell1 addGestureRecognizer:headerTapped];

return cell1;
}

- (void)sectionHeaderTapped:(UITapGestureRecognizer *)gestureRecognizer {

NSIndexPath *indexPath = [NSIndexPath indexPathForRow:0 inSection:gestureRecognizer.view.tag];
if (indexPath.row == 0) {
    BOOL collapsed  = [[arrayForBool objectAtIndex:indexPath.section] boolValue];
    for (int i = 0; i < [_questionArray count]; i++) {
        if (indexPath.section==i) {
            [arrayForBool removeObjectAtIndex:i];
            [arrayForBool insertObject:[NSString stringWithFormat:@"%d", !collapsed] atIndex:i];
        }
    }
    NSLog(@"%@", arrayForBool);
    [self.faqTblView reloadSections:[NSIndexSet indexSetWithIndex:gestureRecognizer.view.tag] withRowAnimation:UITableViewRowAnimationAutomatic];
    for (NSIndexPath *indexPath in self.faqTblView.indexPathsForSelectedRows) {
        [self.faqTblView deselectRowAtIndexPath:indexPath animated:NO];
         }
    cell1.imageView.transform = CGAffineTransformMakeRotation(M_PI);
     }
}

-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *questionCellIdentifier = @"questionCellIdentifier";
QuestionCustomCell *cell = [tableView dequeueReusableCellWithIdentifier:questionCellIdentifier];
if (cell == nil) {
    NSArray * myNib;
    myNib =[[NSBundle mainBundle]loadNibNamed:@"QuestionCustomCell" owner:self options:nil];
    cell = (QuestionCustomCell *)[myNib lastObject];
}

BOOL manyCells  = [[arrayForBool objectAtIndex:indexPath.section] boolValue];
if(manyCells){
    cell.questionNameLbl.text = [_answerArray objectAtIndex:indexPath.section];
}
return cell;
}
0
User558

Bu bağlantıyı kontrol edin:

http://iostechnotips.blogspot.in/2014/05/expandable-uitableview.html

-(UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section

* UITableView delegate yöntemini viewForHeaderInSection kullanın ve özel bir UIView döndürün.

* "Genişletilebilir: (id) gönderen" eylemiyle alt görünüm olarak UIButton ekleyin. Gönderen kimliğini bölüm numarası olarak kontrol edin ve tablo görünümünü yeniden yükleyin.

0
Rahul